Overview
Discover SketchScript — a Haskell-powered DSL for rapidly prototyping UI mockups from code.
🚀 Welcome to SketchScript
✨ Why SketchScript?
-
🧠 Design-Driven Code
SketchScript lets you express UI layouts and structure through readable, functional code. Your wireframes now live alongside your logic, test cases, and docs — not locked in Figma or Balsamiq.
-
✍️ Simple, Expressive Syntax
Designed to be minimal yet expressive. A few lines of code can describe full layouts.
-
🛠 Tooling-First Experience
With upcoming extensions for VS Code, Emacs, Vim, and Neovim, SketchScript is built to slide right into your workflow.
-
📚 A Living Source of Truth
Your mockups are now version-controlled, searchable, and part of your CI pipeline. No more “latest version” confusion or missing links in handoff — your wireframes are code.
-
🧩 Learn Frontend Fundamentals
SketchScript introduces box models, layout principles, and component thinking in a gentle, declarative way — perfect for new designers who want to understand the frontend world.
-
💸 Ditch Expensive Tools
Skip Balsamiq or other paywalled UI tools — SketchScript is free, open-source, and integrates directly into your stack.
SketchScript is the perfect bridge between design intent and production code.
📚 Quick Links
Getting Started (Coming Soon)
Set up SketchScript in your project and build your first mockup.
Syntax Reference
Learn the full DSL syntax for building components and layouts.
Codegen Guide
Understand how HTML is generated and how to customize output.
CLI Overview (Comming Soon)
Use the SketchScript CLI to preview, generate, and test your mockups.
FAQ
Have a question? Check the most commonly asked ones here.
Contributing
Learn how to contribute to SketchScript and shape its future.
🚧 Work in Progress
SketchScript is under active development. We're refining codegen quality, IDE tooling, and DSL ergonomics. If you’d like to contribute or give feedback, check out our GitHub repo.
Let your designs live in code. Start with SketchScript today.