Canvas

Design freely.
Without limits

Kirki uses an atomic design approach — every element starts as a building block you control completely. No pre-decided widgets. No component ceilings. Place anything, anywhere, composed exactly the way you intend.

Get started free
Kirki left panel, canvas & the right panel; a frame is being taken inside the canvas.

Every design decision.
Yours to make.

Position

Organize elements with precise control over layout, positioning, and spacing to create a seamless design.

Position options from the Kirki right panel

Typography

Learn more

Style typography with advanced controls over fonts, weights, spacing, and alignment to craft stunning text.

Typography options on selection on a text appeared on Kirki right panel

Size

Size options on Kirki right panel

Styles

Style options like fill, border, radius & others

Transforms

Enhance your design with shadows, transitions, filters, and more to create a dynamic and engaging experience.

Transform options like 3d, self perspective & others.

Build flexible grids with full control over columns, gaps, and responsiveness for pixel-perfect layouts.

Flexible grid controls in layout option
Variables for reusable text, colors, numbers & font families

One change. Everything updates.

Define colors, typography, and spacing as variables once. Update any variable and watch it apply across every element on every page—instantly.

kirki Infinite freeform canvas

Design freely on an infinite freeform canvas

Design, customize, and arrange everything with full freedom on a smart canvas. Just drag and drop to build complex layouts that stay perfectly structured.

Left panel pre-built sections

Start faster with pre-built sections

Access a curated library of high-fidelity, responsive blocks designed to be dismantled. Drag in a section, attach your global styles, and make it yours in seconds.

Interaction timing options

Fine-tune timing on every interactionh

Coming Soon

The first keyframe-perfect interaction builder for WordPress. Direct complex multi-element sequences and scroll-bound animations without touching a single line of GSAP.

Variables for reusable text, colors, numbers & font families
kirki Infinite freeform canvas
Left panel pre-built sections
Interaction timing options
Staging options & publish history

Edit on staging.

Publish when it's perfect.

Edit on staging. Publish when it's perfect.

Make changes in a safe staging environment — no risk to your live site. Publish only when you're ready. Multiple snapshots mean you can always roll back.
Dev mode with full CSS visibility

Hand off with confidence.

Dev mode gives developers full CSS visibility, clean structured markup, and custom code access — all built directly into Kirki. No separate handoff tools needed.
Full CSS inspection for every element
Clean, minimal HTML output — no bloated markup
Custom code injection support
Developer-readable structure throughout
Custom attributes for custom scripts, third-party integrations, or advanced functionality.

Extend anything.

Your way

Extend anything. Your way

Add custom attributes to any element — for custom scripts, third-party integrations, or advanced functionality. No workarounds, no limits.
Add data attributes to any element
Connect to third-party scripts and tools
Build advanced functionality without custom code
Interactive states and pseudo-classes, including hover, focus, and visited.

Design hover, focus, and active states — visually.

Style every interactive state directly on the canvas. No CSS knowledge required — but full CSS power available when you want it.
Hover, focus, active, and visited states
Visual controls — see changes in real time
Full CSS pseudo-class support for advanced users

Everything you need.
Nothing you don't.

Interaction & animation feature visual preview

Interaction & Animation

Forms, popups, maps, SEO, icons — all built in. Fewer plugins, faster sites, fewer vulnerabilities.

Essential app integrations like inside Kirki

Get essential app integrations

20+ built-in apps from Mailchimp to Google Search Console — no third-party setup.

Seamlessly migrate to Kirki from Figma, HTML or any other Builders

Seamlessly migrate to Kirki

Import from Figma, HTML, or any existing builder. Styles, spacing, and layouts preserved.

Import Figma design to Kirki

Figma to Kirki

Import Figma designs directly — preserving your styles, spacing, and layouts exactly as designed.

dev-mode-img

Dev mode

Full CSS visibility and clean structured markup for seamless developer handoff.

Showing unlimited breakpoints inside Kirki canvas

Create unlimited breakpoints

Less plugin reliance means fewer conflicts, better performance, and a smoother experience—without the WordPress plugin chaos.