Explore StyleUI Visually
Want to test the canvas or start a free trial?
Tailored perfectly for Next.js and React.js.
Introduction
Welcome to the StyleUI Documentation. StyleUI bridges the gap between visual design and code. Instead of wrestling with absolute positioning and complex Tailwind utility arrays, StyleUI provides a local visual canvas that syncs standard, clean Tailwind code directly back into your local Next.js files.
Why Developers Choose StyleUI
Visual control. Pristine local codebase.
- Zero dependencies in production — outputs 100% clean Tailwind CSS utility classes.
- Runs completely locally on your hardware. Your source code never uploads to external servers.
- Interactive AST parser maps canvas changes back to React elements natively.
Quick Start & Installation
Getting started with StyleUI takes less than a minute. You do not need to install heavy dependencies or change your project architecture.
Download the Chrome Extension
The StyleUI visual canvas interfaces with your local codebase through our official browser extension. Download and install the extension from the Chrome Web Store (the link is sent in your purchase confirmation email).
Open your existing Next.js project
Navigate to your project directory in your local terminal.
cd your-nextjs-projectConfigure License Key Environment Variable
Create or open a .env or .env.local file in your project's root directory and add your unique license key:
STYLEUI_LICENSE_KEY=<YOUR-LICENSE-KEY-HERE>Initialize the StyleUI CLI
Run the initialization command. The CLI automatically reads your STYLEUI_LICENSE_KEY from the environment, installs the correct plugin, and configures it in your project.
npx @styleui/cli initStart StyleUI dev server & Press Alt
Spin up the local visual editor dev server. Open http://localhost:3000 in your browser. Once the page has loaded, press the Alt key (or Option on macOS) on your keyboard to start using StyleUI.
npx @styleui/cli dev3000 is already in use, you can pass a custom port parameter to spin up the local server elsewhere. See the Troubleshooting section below.Authentication & License Keys
When you purchase StyleUI, you receive a unique License Key via email. This key grants access to core visual compiler libraries and ensures licensing tier limits are adhered to.
Environment Variable
Add STYLEUI_LICENSE_KEY=<YOUR-LICENSE-KEY-HERE> to your project's .env or .env.local file for automatic detection.
Device ID Binding
Your verification key is securely verified on check-in and permanently bound to your current local Device Hardware ID.
Seat Limits
Depending on your tier (Creator, Startup, or Enterprise), you have a maximum number of concurrent active devices.
If you run into seat limits, you can easily deactivate unused machines via the customer portal or reach out to support.
Core Features & Workflow
The StyleUI canvas operates like a local companion designer. It reads your codebase, provides visual controls, and compiles changes back directly. Here is a breakdown of the key systems:
Visual Editing & Drag-and-Drop
Click any element on your live local site to select it. Use the StyleUI canvas to drag, drop, resize, and align elements without touching the CSS. It behaves exactly like design tools but generates real code.
Instant Text Editing
Double-click any text block to fix typos or change copy directly on the screen. The AST engine maps the modification to the exact string literal in your React JSX layout.
The Color & Theme Panel
Modify your color palette visually. StyleUI translates these selections into standard, theme-compliant Tailwind color utility classes (e.g. bg-purple-600).
The Sync Button
Once you are happy with your visual edits, hit the Sync button in the StyleUI interface. Our engine will parse your changes, resolve AST overlaps, and inject the exact, clean Tailwind className strings right back into your local .tsx or .jsx files in real-time.
Troubleshooting & FAQ
Need help? Here are the most frequently asked questions and troubleshooting steps for the StyleUI local CLI environment.
QThe CLI is throwing a "Port in Use" error.
Ensure you don't have another application running on the default StyleUI port. You can terminate the existing process, or pass a custom port parameter if supported by the CLI.
QMy visual changes aren't saving to my code.
Ensure you have explicitly clicked the "Sync" button in the UI. Also, verify that the terminal instance running the CLI process has appropriate write permissions for your project directory structure.
QDoes StyleUI lock me into a proprietary framework?
No. StyleUI outputs standard, clean Tailwind CSS utilities. If you ever stop using StyleUI, your code remains 100% yours, clean, fully functional, and completely independent of our tool.
Still Have Questions?
Try the canvas in the live interactive demo sandbox, or sign up for a free 7-day trial key.