FSCSS has a full browser IDE — multi-file workspace, live compile, preview, component registry, snippets, terminal, and export — in the web app.

Try it: fscss.devtem.org/ide

Guide: fscss.devtem.org/ide-guide

What you get

Area What it does
Editor Monaco + FSCSS highlighting and autocomplete (def, arr, imp, pat, …)
Files .fscss, .css, .html, .js, folders, entry file (star)
Run Compile active or entry file (Ctrl+Enter)
Preview Live page from HTML + all compiled CSS + JS modules
Components Search registry packs; one-click @import((*) from name)
Export CSS, min CSS, standalone HTML, ZIP, JSON backup, share link

Workspace autosaves to localStorage (keys fside:). Export a JSON backup if you’re in a locked-down browser.

Quick start

  1. Open the IDE.
  2. Edit main.fscss.
  3. Ctrl+Enter — CSS on the right.
  4. Ctrl+Shift+Enter — compile and open preview.
  5. Export when you’re happy.

On Mac, use Cmd instead of Ctrl.

$accent: #9d7eff; .card { bg: #12121a; color: #e8e3ff; size: 200px 100px; padding: 1rem 1.25rem; rounded: 12px; border-left: 4px solid $accent!; }

Layout (mental map)

  • Top: Run, Preview, Auto, Export, Import, theme, settings
  • Left: Files · Components · Snippets · Tools
  • Center: tabs + editor | CSS / Preview
  • Bottom: Terminal + Problems
  • Status: compiler version, errors, cursor

Drag the dividers to resize. On phones the sidebar overlays and panes stack.

Components without leaving the tab

Open Components (Alt+2). Cards load from the public libs index (with fallbacks). Import inserts:

@import((*) from overlapui)

at the top of the current FSCSS file (skipped if already present). Repo jumps to GitHub. Search matches name, description, keywords.

Useful packs: st-core, overlapui, circle-progress, icon-mask, and more on the libraries page.

Shortcuts worth muscle memory

Action Keys
Compile Ctrl+Enter
Compile + preview Ctrl+Shift+Enter
Command palette Ctrl+Shift+P / F1
Auto-compile toggle Alt+A
Files / Components / Snippets / Tools Alt+1 … Alt+4
New file Alt+N
Terminal Ctrl+`
Shortcuts list Alt+/

Full table: ide-guide.

Terminal

Focus with Ctrl+`. Handy commands:

`text
compile · all · preview
libs [query]
version 1.2.5
export · help
`

exec(_log, …) and preview console.* land here too.

Export / share

  • Compiled or minified CSS
  • Standalone HTML
  • ZIP (sources + dist/*.css)
  • JSON backup (merge or replace on import)
  • Share link; URL hash #code= / #run?code= opens shared FSCSS

Good to know

  • Remote @import and the component list need network.
  • Preview is a sandboxed iframe (no parent localStorage).
  • Switch compiler version in settings or version x.y.z (jsDelivr esm.min.js).
  • Exposed for debugging: window.xfscss.

Related

Open the IDE, hit Ctrl+Enter, and ship the CSS when you're ready.