Precise Next.js + Tailwind Visual Editing for Developers and Designers
AI builds your app. You decide how it looks.
Native macOS visual editor for Next.js + Tailwind projects. Edit layout, text, colors, icons, fonts, effects, and design tokens. Every change writes back to your source as a clean format-preserving diff.
The problem
AI generates fast. Visual polish is slow.
AI tools generate entire apps in minutes. But refining the visual output — adjusting layouts, spacing, colors — still means squinting at Tailwind classes and deciphering unfamiliar layout structures in a code editor.
“AI generates your app in minutes. Then you spend hours reading code to adjust layouts.”
“Or you just... move it.”
How it works
Four steps. Zero config.
01
Open your project
Point Decise at any Next.js + Tailwind project. The Project Navigator shows every route in your app. Click to preview, click to edit.
02
Edit visually
Select any element. Drag to reposition. Edit text directly on the canvas. Swap icons. Adjust spacing, typography, colors, and effects.
03
Fine-tune with precision
Edit colors in OKLCH. Inspect and edit design tokens from your Tailwind config. The color picker speaks your design system’s language.
04
Code updates, history tracks
Every edit writes clean code changes back to the source. Full session history with visual before and after lets you undo or restore anything.
See it in action
See Decise in 60 seconds.
Demo video — coming soon
Why Decise
Built different. On purpose.
Not another Electron wrapper. Not a design tool pretending to write code. A native app that treats your codebase with respect.
Your real code
The code is the source of truth. No silos, no proprietary formats, and no lock-in.
Native macOS
Built in Swift, not Electron. Launches instantly. Feels like it belongs on your Mac.
Zero config
Open any Next.js + Tailwind project. No plugins, no wrappers, no setup.
Logic untouched
Only modifies layout and styling. Event handlers, state, and data stay as-is.
Format-preserving
Only the lines you edit change. Your comments, formatting, and code style stay intact.
Instant feedback
Changes render in milliseconds. Edit, see, and iterate at the speed of thought.
Full editing surface
Classes, text, icons, images, colors, borders, and shadows — not just drag and drop.
Design System aware
Search your tokens, edit values in place. Pick Google Fonts. Native OKLCH color editing.
Session history
Full undo/redo with visual provenance. See exactly what changed, when, and why.
What you can edit
Every detail. Directly on canvas.
From layout and spacing to colors and effects, Decise gives you visual controls for the properties that matter most.
Screenshot — Layout & Spacing
Layout & Spacing
Visual box model for margin, padding, and gap. Named pickers for flex and grid layout. Every change lands directly in your component source.
Screenshot — Typography
Typography
Edit font size, weight, line height, and alignment visually. Pick Google Fonts for editable font-family tokens, with project-aware previews.
Screenshot — Colors & Gradients
Colors & Gradients
Native OKLCH color editing for backgrounds, text, borders, rings, and gradient stops. Source-backed writes keep your design tokens in charge.
Screenshot — Effects
Effects
Bounded editors for shadow, blur, backdrop blur, border width and radius, and rings. Fine-tune the details that make a UI feel polished.
Screenshot — Text Editing
Text Editing
Click any text on canvas and type to edit. Shared-template writes update every instance truthfully, and dynamic text is safely rejected.
Screenshot — Icon Swapping
Icon Swapping
Browse and swap lucide-react icons visually, directly on the canvas. Imports update automatically, and props and class names are preserved.
Screenshot — Image Swapping
Image Swapping
Swap image sources visually without leaving the canvas. Asset paths update in your source files, and surrounding JSX stays intact.
Screenshot — Project Navigator
Project Navigator
Route-first navigation for your entire app. Inline filtering, pinned and recent routes, bookmarked views, and saved variations for dynamic routes.
Screenshot — Design System
Design System
Search Tailwind tokens and edit values in place. Pick Google Fonts for font-family tokens. Source-backed writes, no guessed edits.
Screenshot — History & Provenance
History & Provenance
Session undo/redo with per-edit provenance and checkpoint detail. See exactly what changed, when, and why — and restore any checkpoint.
The maker
“I’m a coder who designs and a designer who codes. I’ve shipped multiple SaaS products over the years and I’ve always hated the artificial divide between design and development. Figma over here, your IDE of choice over there, browser dev tools in between, and awkward conversations about what really matters. Every context switch breaks your flow. Yet we are making a product that needs to come together, for the user.
When AI tools started generating entire apps, this gap got worse, not better. I could scaffold a full Next.js app in minutes, then spend hours reading code I did not write to move buttons twenty pixels to the right.
I also did not want a fake visual editor that looked magical right up until it broke your code. If a refactor is safe, Decise should do it. If it needs a fallback or should block, it should tell you the truth.
So I built Decise. Because your codebase is already a design tool. It just needed to become visual.”
Kristian — Designer, developer, maker of Decise
Pricing
Try it for free. Pay if it makes your life easier.
Trial
Free
No time limit
- Every feature, no limits
- Bundled sample project
- No time limit
- No credit card
Decise
or $99/year (save 31%)
- Everything in the trial
- Open any project
- Your code, your machine
- 14-day refund guarantee