Scamp User Documentation

Scamp is a local-first design tool that generates real code as you design. Draw rectangles, add text, adjust properties, and Scamp writes production-ready TSX and CSS Module files to your project folder. Edit those files externally — in VS Code, a terminal, or with an AI agent — and the canvas updates automatically.

Table of Contents

  • Getting Started — Install, create a project, and understand the start screen
  • Canvas — Drawing, selecting, moving, resizing, zoom, and canvas sizing
  • Elements — HTML tags, tag-specific attributes, inputs, select, and svg
  • Properties Panel — Visual and CSS editing modes for element styles
  • Breakpoints — Responsive design with per-breakpoint overrides
  • Typography — Text elements, fonts, and typographic controls
  • Color Picker — Colors, alpha, hex input, and theme tokens
  • Element Naming — Rename elements and how names map to CSS classes
  • Grouping — Group and ungroup elements into flex containers
  • Layers Panel — The element tree, selection, reordering, and nesting
  • Code Output — What Scamp generates, save status, and the live code preview
  • Bidirectional Sync — External editing and working with AI agents
  • Themes — Theme tokens, the theme.css file, and using tokens in your designs
  • Terminal — The built-in terminal panel
  • Settings — App and per-project configuration (breakpoints, artboard, fonts)
  • Undo and Redo — History tracking and limitations
  • Keyboard Shortcuts — Complete shortcut reference
Getting Started## InstallationCanvasThe canvas is your main workspace — a scrollable viewport where you draw elements that become real code. A floating toolbar sits above it with the drawing tools, and a page-size control pins to the...ElementsEvery Scamp element is rendered as a real HTML tag in the generated code. By default rectangles are `<div>`, text is `<p>`, images are `<img>`, and inputs are `<input>` — but you can change any ele...Properties PanelThe properties panel is on the right side of the screen. It shows editable properties for the selected element. It has two modes, toggled at the top: **Visual** and **CSS**.BreakpointsDesign for multiple screen sizes without writing media queries by hand. Scamp's breakpoint system lets you switch the canvas to Mobile, Tablet, or Desktop and make style edits that land inside the ...TypographyText elements have dedicated typographic controls in the [Properties Panel](properties-panel.md).Color PickerThe color picker appears whenever you click a color swatch in the [Properties Panel](properties-panel.md) -- for background, border, or text color.Element NamingEvery element in Scamp has a name that maps to its CSS class in the generated code.Grouping ElementsGroup selected elements into a flex container to organize your layout.Layers PanelThe layers panel is in the left sidebar. It displays your element tree -- every element on the current page, organized by nesting depth.Code OutputScamp generates real, production-ready code files as you design.Bidirectional SyncScamp's defining feature is two-way sync between the canvas and your code files. Edit in Scamp and the files update. Edit the files externally and the canvas updates.ThemesScamp supports design tokens through a `theme.css` file in your project folder. Tokens let you define reusable colors and apply them across your design.TerminalScamp includes a built-in terminal so you can run commands without leaving the app.SettingsScamp has two kinds of settings:Undo and RedoScamp tracks your changes so you can step backward and forward through your edit history.Keyboard ShortcutsComplete reference of keyboard shortcuts in Scamp.