Design in the browser with Flare.

A visual CSS editor for designers who ship with AI.

Best experienced on desktop

Set up flare-dev for visual CSS editing.

npm install -D flare-dev

If this project uses Vite, add the plugin to vite.config.ts:
  import flare from "flare-dev/vite"
  plugins: [flare()]

If not using Vite, add this script tag to the HTML to only load on localhost:
  <script>
    if (["localhost"].includes(location.hostname)) {
      const s = document.createElement("script");
      s.src = "https://unpkg.com/flare-dev/dist/flare.js";
      document.head.appendChild(s);
    }
  </script>
Install
npm install -D flare-dev
Add the Vite plugin
// vite.config.ts
import flare from "flare-dev/vite"

export default defineConfig({
  plugins: [flare()],
})
Start the bridge
# Start the bridge so Flare can push changes to your agent
npx flare-dev bridge
Install
npm install -D flare-dev
Add a script tag
<!-- Load on every page, including production -->
<script src="https://unpkg.com/flare-dev/dist/flare.js"></script>
<!-- Or, load only on localhost to save bandwidth -->
<script>
  if (["localhost"].includes(location.hostname)) {
    const s = document.createElement("script");
    s.src = "https://unpkg.com/flare-dev/dist/flare.js";
    document.head.appendChild(s);
  }
</script>
Start the bridge
# Start the bridge so Flare can push changes to your agent
npx flare-dev bridge
1 Edit visually
→
2 Push to agent
→
3 Applied to source