Documentation

  • Getting started
  • Version control
  • Assets
  • Layers
  • Props
  • Interaction states
  • Variants
  • Composition
  • Templates
  • Preview mode

Tutorials

  • Creating a project
  • Managing assets
  • Building a button
  • Using variants
  • Using templates
  • Integrating in code
  • Version control

Documentation

Getting started

Installing Visly

If you've received early access to Visly, just download and install the Visly desktop app for Mac using the link you received in the invite email. If you want to try out Visly but haven't received an invite yet, you can request an invite here.

Starting from scratch with create-react-app

We built Visly to be easy to integrate into existing apps, but we also made sure that it’s super quick to use when building from scratch. Whether your app's big or small, there's always a need for a solid design system. As long as you build your app using create-react-app or next.js, you won't need any special setup to get Visly running - it just works.

Just use yarn (or npm) to generate a new project, like you normally would.

yarn create react-app MyApp

Once your project is created, open up Visly and choose 'new' in the bottom left corner of the window (we call this the project picker). When saving the project file, we recommend placing it at the root of your project directory, as shown below.

After saving, you should get a new Visly project with some default assets and components. And that's it - no more setup. You can start your development server with yarn start just like you would in any other project, except now you can start using Visly assets and components.

import { colors, icons, textstyles, MyComponent } from './visly'

Integrating into an existing app

Visly is built to be used with your existing app; even if you have millions of lines of code, Visly fits right in. For most setups, it works right out of the box (if you have a very custom bundler setup, you may need to configure a few things).

To integrate Visly into your app, you'll first need to start a new project in Visly - you can do this by opening up Visly and choosing 'new' in the bottom left corner of the window (we call this the 'project picker'). When saving, we suggest placing the project file at the root of the repository, even if you have a mono-repo structure.

You can edit the location where Visly stores its generated code (the default is within the src folder). Press cmd+, (command comma) to open the project settings. Generated code is stored in <output>/visly. For example, if you configure the path to be packages/, the generated code is stored in packages/visly. For mono-repo setups, you can even create a package.json in the visly/ folder.

Enabling hot-reload

Since Visly generates code to the file system as you design a component, any hot-reloading you have configured for you application should work straight out of the box. If your application is not hot-reloading with changes from Visly, make sure your hot-reloading setup is not ignoring the generated visly/ folder.