DEV Community

Cover image for FSCSS IDE: write, compile, and preview FSCSS in the browser
FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on with FSCSS Originally published at fscss.devtem.org

FSCSS IDE: write, compile, and preview FSCSS in the browser

#fscss #tooling #frontend #opensource

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!;
}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)