Online Studio

Available directly at https://studio.backlight.dev.

Backlight.dev comes with a built-in online editor. It's great for fast changes, quick collaboration and anyone in the team can use it, no matter their technical expertise.

You can use Backlight directly in the browser without having to install anything. Here is a first overview of the online editor and its main features.

Top bar

  • To the left of the top bar you'll see the workspace, design system and branch you are currently working on:

A workspace is where your design system(s) will be stored. It is where you can manage who has access or who can contribute to the design system. Learn more about inviting people to your workspace.

The main branch of a design system is always locked. The +Branch button allows you ti instantly create a new branch where you can commit your changes and then merge them to the main branch.

  • In the middle of the top bar there is a toggle that lets you switch between view modes:

The Code view mode will let you type code in the online IDE on the left side of the interface while showing the rendered stories, documentation, tests or associated design on the right.

The Review mode hides the code so you have more space for visual review. For example: checking that the stories rendered from code and the corresponding designs are a perfect match.

The Doc mode will give you a full screen display of your design system's documentation.

Next to the view mode toggle you will find a share button:

Use this button to copy a link to your current work and share it easily for quick collaboration. Learn more about sharing.

  • On the left side of the top bar you will see three additional icons:

The first icon on the left will show the local details of your design system. From there you can find commands to clone the Git repository on your local machine or run the dev environment. Learn more about the CLI.

The second icon will provide an npx command to run your current branch live in your host app, so you can test your components inside your host app before releasing them.

When clicking the third icon on the right, you will find your user preferences. Learn more about user preferences

You will also find buttons to reset the tutorial that guides you through Backlight as a first time user, and to sign out.

  • At the top of this side tool bar you have three tabs:

The top tab will show/hide the file structure of your design system.

The second tab will show/hide the source control menu where you can easily see changes, commit these changes and create pull requests. Learn more about source code management

The third tab will show/hide the release menu where you can easily release your design system on npm and browse the history of previous releases (from your main branch only).

  • At the bottom of this side tool bar there are two icons:

The question mark icon will open a help menu where you can find the latest features, quick access to this documentation and Backlight's keyboard shortcuts. You can also report a bug or request a new feature directly in our Github.

Finally, the Backlight icon allows you to contact the Backlight team via Twitter, Discord or email.