Sketchpad

The modern theme editor for developers and designers.

Sketchpad is a high-performance visual interface designed to eliminate the friction of styling web applications. Stop manual-coding hex values and spacing scales—design visually and export production-ready code in seconds.

---

🖥️ Preview

---

🔥 Features

• Massive Library: Choose from dozens of professional pre-built themes to jumpstart your project.
• Visual Precision: Fine-tune colors, typography, and layout constraints with real-time feedback.
• Universal Export: One-click code generation for:
  • Tailwind CSS (Full config objects)
  • CSS Variables (Native :root variables)
  • React/MUI (Theme providers)
  • Sass/SCSS
• Smart Tokens: Automatically generates accessible color palettes and dark mode variants.
• Developer-First: Clean, minified, or expanded code output that fits right into your workflow.

🚀 Quick Start

1. Browse: Open the library and pick a base aesthetic.
2. Edit: Use the sidebar controls to customize your brand identity.
3. Export: Copy the generated code directly into your project files.

📦 Supported Environments

Export Target	Format	Integration
Tailwind	tailwind.config.js	Full theme extension
Web	variables.css	Native CSS custom properties
Material UI	createTheme.ts	TypeScript-ready theme objects
Design	tokens.json	W3C standard design tokens

---

🛠️ Installation

```bash

Clone the repository

git clone https://github.com/ez0000001000000/sketchpad.git

Install dependencies

pnpm i

Run the editor

pnpm dev