Sloth

Sloth is a local-first design system workbench for native Web Components. It helps teams shape tokens, compose components, validate screens, and inspect framework exports from one portable .sloth file.

The product thesis is markup-first: the source of truth is executable UI, not a static canvas image. Every component is an autonomous custom element that can be previewed, composed, versioned, and exported.

Why Sloth

• Local-first by default. Projects are SQLite-backed .sloth files. No account, cloud, or hosted backend is required.
• Real components. Components render in a sandboxed iframe as Web Components, using the same HTML, CSS, and JS that exports consume.
• Designer and developer bridge. Tokens, component layers, mockups, and exports live together so decisions stay connected.
• Forja UI. The editor stays dense, plain, and work-focused. Borders over decoration; native controls over ornamental UI.

Current Capabilities

• Token groups for color, dimension, font, shadow, and duration, including aliases and diagnostics.
• Component workbench with a built-in library, layer tree, props/attributes, style inspector, source editor, custom preview variants, generated component contract docs, live preview, and save flow.
• Component creation from scratch, starter copy, or inheritance.
• Mockups that compose project components into screen-level HTML with layers, visual insertion, assisted insertion with props/slots/custom states, workflow templates, layout presets, drag/drop, and live preview.
• Export previews for Web Components, React, Svelte, Vue, tokens, Figma JSON, Penpot, SVG, and PNG.
• Explicit export writes to a selected directory with overwrite safety, path validation, and per-file audit status.
• Command palette, route shortcuts, onboarding, and component source version snapshots.
• Visual QA smoke task that captures Home, Tokens, Components, Mockups, and Export screenshots.

Quick Start

Requirements:

• Deno 2
• Rust stable
• Tauri CLI from Cargo

deno task dev

Useful checks:

deno task check
deno task test
deno task test:e2e
deno task visual:qa
cargo test --manifest-path src-tauri/Cargo.toml

Production web build:

deno task build:web

Unsigned desktop bundle:

deno task build

First Design System

1. Create a project and choose a Web Component prefix, for example forja.
2. Define foundation tokens first: color, spacing, type, duration, and shadow.
3. Create components from starter primitives, then refine layers, attributes, styles, and source.
4. Compose mockups to validate components in real UI context.
5. Inspect exports before integrating with a framework or handoff workflow.

Project Structure

• src/app contains shell, routes, onboarding, and command palette.
• src/features contains product workbenches for tokens, components, mockups, and export.
• src/core contains AST, built-ins, IPC types, runtime preview, and export helpers.
• src-tauri contains native commands, SQLite migrations, project persistence, and exporters.
• tests contains unit and browser coverage.

Status

Sloth is pre-1.0 and intentionally unsigned for local builds. The core model is functional; the product roadmap is focused on richer variants, template galleries, visual QA discipline, and deeper downstream workflow confidence.

See ROADMAP.md for the current direction.