Backlight - Build Design Systems - Tool for front-end teams

Code

Screenshot of a VScode window containing some of the Simba starter kit's code next to a Backlight window containing some of the Simba starter kit's documentation.

Use your own IDE

Use Backlight’s CLI with your favorite IDE on your local machine. Backlight works with Visual Studio Code, WebStorm or any other local editor.

How to use our CLI

Screenshot of Backlight's online editor's layout on computer screen and on mobile screen.

Built-in online editor

Backlight comes with an online editor that allows anyone (even non-tech disciplines) to contribute to your design system, making it simple to create branches and push to GitHub and GitLab.

Discover Backlight's studio

Logos of Typescript, Solid, Lit, Javascript, Vue.js, Stencil, Angular, Storybook, Adobe, Svelte, HTML5, CSS3, React, Sass, Less and Tailwind

All stacks supported

Backlight is powered by Vite in the browser to support any stack, so you’ll be sure Backlight works for you.

Tech stacks supported

Screenshot of the "Share current branch" button

Share components instantly

Share real-time previews of the component you’re working on without having to push, release or deploy anything.

Opened lock next to a computer

No lock-in

Backlight promotes 100% standard web development technologies. You are free to eject your design system and continue outside of Backlight at any time.

Stories

Screenshot of Backlight showing stories' code and visual preview

Storybook-compatible

Backlight supports Storybook stories out-of-the-box. Display your stories next to your code for perfect development-design alignment.

How to integrate stories

Simulate real user behavior

Test your components, simulating real user behavior, with built-in support for Storybook’s new interactive stories.

Logos of React, Vue.js, Angular, Svelte, Solid, Stencil and Lit

Multiple stories frameworks supported

Test your components, simulating real user behavior, with built-in support for Storybook’s new interactive stories.

Frameworks supported

Collaboration

Get quick feedback with instant sharing

Developers and designers can collaborate spontaneously and get immediate feedback, thanks to instant sharing. No need to push or wait for a release.

Screenshot showing the comment section open with users discussing the changes made on a component

Collaborate asynchronously with comments

Leave comments directly on the components you’re working on for your team to look at in their own time.

How to use comments

Screenshot of Backlight showing the different sections: code, live documentation and design

Easy for anyone to contribute

With a visually-organized component library, it's easy for anyone to discover and contribute to your design system, no matter their level of tech knowledge.

Visual PR

Screenshot of Backlight showing last commit code and current code side by side

Validate faster with visual pull-request reviews

Thanks to Backlight’s bot, Backlight renders pull-requests instantly for fast visual review. You don't need to wait for the build task or the deploy task in your CI.

Screenshot of Backlight showing a component's last committed visual aspect and its current visual aspect side by side

Visual regression detection

Backlight helps you review only the components that visually changed, so you can focus your review on things that really matter.

Screenshot of Backlight showing a component's last committed visual aspect and its current visual aspect side by side

Review pull-requests on the go

With Backlight’s responsive online editor, you can review pull-requests directly from your phone.

Design integration

Screenshot of Backlight highlighting the design tab showing a Figma preview of a component

Link to your designs

Streamline collaboration between developers and designers. Keep code and design in one place thanks to design previews directly next to your components. Figma, Sketch and Adobe Xd are fully supported.

How to link designs

Screenshot of a button components' UI kit on Figma

Turn coded stories into UI kits

Turn all of your stories into a complete Figma UI kit in minutes.

Discover story.to.design

Design tokens

Screenshot of the style-dictionary starter kit in Backlight

Style-Dictionary support

Built-in Style-Dictionary support means you can define styles once then export to all the places you need them - iOS, Android, CSS, JS, HTML, Figma files, style documentation...

Why Style-Dictionary?

Screenshot of Backlight and Figma showing synchronized design tokens

Works with Figma tokens plugin

Write your design tokens in Backlight, then bring them into Figma thanks to integration with the Figma tokens plugin.

Check out our guide

Documentation

Screenshot of Backlight showing the documentation of the Furious starter kit, written in markdown

Markdown-centric documentation

We believe Markdown is best for writing technical documentation that embeds interactive components.

Edit documentation in real-time

Everyone can contribute directly to documentation with real-time editing and instant online preview.

Logos of Markdown, MDX2, MD Vue, MDsveX and Nunjucks

All common documentation formats supported

Backlight has built-in support for Markdown, MDX2, MD Vue, MDsveX and Nunjucks for documentation.

Screenshot of Backlight showing Simba's documentation along with a list of the released versions

Automatically versioned with each release

Forget about manually updating documentation versions. With Backlight, your documentation is automatically tagged and versioned with each release.

A screenshot of Backlight showing the documentation of Bricks design system starter kit. Over it, an enlarged "Make public" button with a cursor on it.

Export your documentation

Export your documentation into static pages that you can host and serve anywhere.

Releases

Screenshot of Backlight highlighting the modal used to released a package on npm

Publishes npm packages

Design systems are compiled, packaged and versioned on demand. Packages can be delivered to any npm registry like npmjs.org or GitHub packages.