FeaturesDocsPricingMasterySessionsBlogLog in
    FeaturesDocsPricingMasterySessionsBlogLog in
    • Welcome
    • Getting started
    • Concepts
      • Folders
    • Online Studio
      • Comments
      • Source Code Management
      • User's Preferences
    • CLI
    • VSCode Extension
    • Design Tokens
      • Icon prefixUsing Style-Dictionary & Figma
      • Icon prefixUsing Specify
      • Icon prefixUsing CSS Custom properties
      • Icon prefixUsing System-UI
    • Stories
    • Testing
    • Using the DS in your app
      • Standard procedure
      • Icon prefixCreate React App (CRA)
      • Icon prefixNuxt 3
      • Icon prefixNext.js 11 and earlier
      • Icon prefixNext.js 12 and later
      • Icon prefix11ty (with Nunjucks)
    • Design System Examples
    • How-tos
      • How to load an image
    • Technologies Demos
    • Technologies
      • Icon prefixJavaScript
      • Icon prefixTypeScript
      • Icon prefixJSX
      • Icon prefixComponent Story Format
      • Icon prefixCustom Elements Manifest
      • Icon prefixReact
      • Icon prefixPreact
      • Icon prefixVue 3
      • Icon prefixSvelte
      • Icon prefixStencil
      • Icon prefixRiot
      • Icon prefixµce
      • Icon prefixPrism
      • Icon prefixAssemblyScript
      • Icon prefixWebAssembly Text Format
      • Icon prefixCSS
      • Icon prefixSass
      • Icon prefixLess
      • Icon prefixmarkdown
      • Icon prefixmdjs
      • Icon prefixMD Vue
      • Icon prefixMDX
      • Icon prefixMDsveX
      • Icon prefixNunjucks
      • Icon prefixpug
      • Icon prefixVS Code Custom Data Format
      • Icon prefixStyle Dictionary
    • Supported config files
      • package.json
      • studio.config.json
      • tsconfig.json
      • tailwind.config.js
      • eslint
      • prettier
      • stories.preview
      • custom-elements-manifest.config.mjs
      • sd.config.{json,js}
    • FAQ

    Use the search bar on top of the page to quickly get the information you need.

    Welcome to Backlight Documentation #

    Backlight is a collaborative platform empowering front-end teams to build and ship great Design Systems. Backlight is code-centric but, it embraces collaboration across all disciplines: developers, designers, UX writers, and product owners.

    Discovering Backlight? #

    Getting started

    User's Guides #

    Concepts

    Basic concepts in Backlight.

    Online Studio

    Code components, review PR visually, write documentation and release your design system directly online.

    CLI

    Code components locally, write documentation with your favorite IDE and link the design system directly into your app.

    VSCode Extension

    Coming soon.

    Building Design Systems #

    Design Tokens

    How to manage your design tokens.

    Stories

    How to create isolated instances of components to apply component-driven development.

    Testing

    Automated unit testing of your components.

    Using the DS in your app

    How to use a Backlight design system in your application.

    Design System Examples

    Design Systems made with Backlight.

    Reference #

    How-tos

    Short articles to solve specific challenges.

    Technologies Demos

    Demos of how some technologies can be used in Backlight.

    Technologies

    Reference guides of all technologies supported.

    Supported config files

    Description of all root files supported.

    FAQ

    Frequently Asked Questions.

    Need more help? #

    • Discord #help channel for Backlight.
    • Open an issue
    • High-priority email support (for PRO and ENTERPRISE plans only)
    Getting started