Total visual control over
clean WordPress code
Every feature of this AI WordPress page builder serves one promise: convert any HTML, CSS & JavaScript — even a whole vibe-coded website — into editable WordPress, design it visually or with AI, and ship standard, portable code with nothing hidden.
Convert any HTML to WordPress, instantly editable
This is the one thing Tuli is built around. Drop in any HTML, CSS & JavaScript — even an entire vibe-coded website — and Tuli instantly turns every tag into an editable page builder element on a real WordPress page. Every part round-trips perfectly, ready to edit visually.
- Section comments are preserved, not folded into the next rule
- Compound selectors like
.btn:hoverand.card .iconstay exact - Shorthands decompose cleanly when you edit one side
-
@mediablocks keep their breakpoints and grouping
/* ===== Buttons ===== */
.btn {
padding: .75rem 1.5rem;
border-radius: 12px;
}
.btn:hover {
background: #4b46e0;
}
@media (max-width: 599px) {
.btn { width: 100% }
}Your AI co-designer, inside the canvas
Don't feel like starting from a blank page? Ask Tuli's AI assistant to build it. Generate full pages and sections, draft copy, and edit existing content — all without leaving the builder.
- "Build a pricing section" → a complete, styled block appears
- "Make this shorter / punchier" rewrites your content in place
- Generated CSS lands in your real source, fully editable
- Review and refine every line — the AI assists, you stay in control
The inspector, end to end
Click any element and shape it without touching code — or type CSS directly. Edits sync two ways and your output stays clean, with duplicate selectors auto-merged into one rule.
Spacing controls
Per-side padding and margin with smart snap-back protection — your value never jumps while you type.
Typography
Font family, size, weight, line-height, letter-spacing and alignment — all live, all standard CSS.
Color & background
Pick colors, gradients and backgrounds with a clean picker that maps straight to real declarations.
Layout & flex/grid
Toggle display, direction, alignment, gap and wrapping with icon toggles instead of guesswork.
Two-way CSS sync
Type CSS by hand and the visual controls update; click the controls and the CSS updates — both stay in lockstep with the live canvas, and duplicate selectors auto-merge.
One-click clear
A green dot beside any property clears it instantly — from the element and every related variant at once.
Everything you need to assemble a page
Elements library
Sections, containers, columns, buttons, headings, text, images, code blocks, shortcodes and more — drag or click to add.
Structure tree
A live outline of the page DOM. Reorder, nest, rename and select — newly inserted nodes auto-expand the first time.
Query loops
Enable a loop on any element and it clones per result. Drive it from the Main Query, a visual WP_Query, raw PHP or an ACF repeater. Style the template once; every result matches.
Reusable templates
Headers, footers and sections built once and shared across every page on your site.
PHP & shortcodes
Type raw PHP or any shortcode; it's pre-rendered server-side so the canvas shows real output, not raw tags.
Dynamic data tokens
Insert post fields and any ACF field from a searchable picker — click to insert — or print any WordPress/custom function by typing {function_name}. Resolved live from WordPress.
Built-in form builder
Build real, editable form fields with no form plugin. Email submissions or post them to a custom action URL — it's part of the builder.
AJAX filters
Add built-in AJAX filters to any query loop for instant, no-reload faceting. WP Grid Builder is supported too.
30+ WooCommerce blocks
Compose custom product, archive, cart and account pages from 30+ WooCommerce building blocks — title, price, add-to-cart, gallery, grids and more.
One move, one tick, everywhere
When you change a value, everything happens on the very same frame — so the canvas updates before your finger lifts.
You change a value
Drag a slider, pick a color, type a number, or click the green dot to clear a property.
The source CSS updates
Tuli writes the change straight into the right place — site-wide rules to your Global CSS, page-specific #id rules to Page CSS.
The canvas repaints
The live preview re-renders synchronously from that same CSS — no lag, no stale value snapping back.
Every surface stays in sync
The Style panel, the Page/Global CSS boxes and the canvas are all bound to one source of truth. Edit any one — the rest follow.
You save when ready
No autosave surprises. Experiment freely; persistence happens only when you click Save.
Tuli ships clean code
On save, your work becomes clean, bloat-free .html and .css files that WordPress serves — fast, cacheable and portable, with no code lock-in.
Rich media and motion, built in
Drop in media and interactive elements and skin them visually — Tuli only loads each element's front-end script on pages that actually use it.
Video element
Upload a file or embed YouTube or Vimeo. A clean, bundled player skins it consistently, with controls you can style.
Audio element
Upload audio and present it through the same bundled player — a tidy, styleable HTML5 audio control.
Slider / carousel
Build slideshows from any content and let them rotate — the slider script loads only when a slider is on the page.
Tabs
Organize content into switchable tabbed panels — fully editable and styled like the rest of your page.
Accordion
Collapsible sections for FAQs and long content — expand, collapse and style each panel visually.
Divider
A simple, configurable separator to give your sections breathing room and visual structure.
Consistent by default
Define your brand once and reuse it everywhere. Tuli's theme settings, tokens and fonts keep every page on-brand.
- Design tokens exposed as
:rootCSS custom properties - Google Fonts lazy-loaded directly into the canvas
- A typographic baseline for body, headings and containers
- Live preview of theme settings as you tweak them
:root {
--brand: #6c5ce7;
--accent: #ff7a5c;
--font: "Inter", sans-serif;
--radius: 16px;
}Responsive breakpoints
Edit desktop, tablet (≤ 991px) and mobile (≤ 599px) independently. Tuli wraps your edits in the right @media query automatically, and editing the desktop value never disturbs the responsive ones.
Safe by design
HTML, CSS and JS are sanitized on every save. Capability checks and nonces guard every endpoint. Raw <script> stays opt-in for trusted administrators only — never silently widened.
Plays well with your whole stack
Tuli is built for the WordPress ecosystem you already run — WooCommerce, ACF, WP Grid Builder, PHP, shortcodes and built-in AJAX filters, all supported out of the box.
WooCommerce
30+ native building blocks. Assemble custom product, archive, cart and account pages from composable parts.
ACF
Advanced Custom Fields are supported by default — field names appear in the dynamic-data picker, and you can loop ACF repeaters in a query.
WP Grid Builder
Drop in a Facet element and wire WP Grid Builder facets to your query loops for advanced filtering.
Built-in AJAX filters
Add Tuli's own faceted filters — taxonomy, custom field, search and sort — to any query loop, refreshing results over AJAX with no page reload.
Any shortcode
Drop in any plugin's shortcode; it's rendered server-side so the canvas shows the real result.
Raw PHP
Type <?php … ?> blocks; Tuli pre-renders them so dynamic output appears live in the editor.
30+ WooCommerce building blocks
Product parts, loop parts and store-wide parts — each is a tiny, selectable element WooCommerce renders and you style. The WooCommerce group only appears when Woo is active.
Single-product parts
Loop, page & global parts
Built for momentum
Undo & redo
Debounced snapshots of HTML and CSS let you experiment and roll back instantly.
Copy & paste blocks
Copy any styled section as a self-contained snippet and paste it anywhere — its styles travel with it.
Explicit save
No surprise autosaves. Experiment freely with values; nothing persists until you click Save.
No script bloat
Tuli loads front-end scripts only for the elements you actually use — sliders, tabs and the rest stay off the page until they're needed.
See it for yourself
The fastest way to understand Tuli is to paste a page in and start editing.