The only visual editor developers also love

www.timeful.io · 2026-10-04 · by Long Nguyen ·generic
Design freely on a canvas, generate code, and import or edit existing code. Real two-way sync, zero AI credit usage.

The only visual editor developers also love

The only visual editor developers also love

Edit visually and Timeful turns your edits into real code, no AI required. Developers can review and merge code changes into your own repository.

Download for Mac

Free trial, no credit card required

Works with:VueTailwind

<script setup lang="ts">
  import ...
  const scrollview = useTemplateRef("scrollview");
  const { arrivedState } = useScroll(scrollview, {offset: {top: 14}});
</script>
<template>
  <div class="bg-white flex h-screen overflow-hidden">
    <TheNav />
    <Scrollview ref="scrollview" class="grow lg:pr-2.5">
      <div
          class="sticky top-2.5 z-10 shrink-0 mb-2.5 gap-2.5 text-sm transition-[padding] duration-300 h-14 flex items-center w-full"
          :class="arrivedState.top ? 'px-0' : 'px-2.5'"
      >
        <TabsRoot initial-value="featured">
          <TabsItem value="featured">Featured</TabsItem>
          <TabsItem value="nature">Nature</TabsItem>
          <TabsItem value="people">People</TabsItem>
        </TabsRoot>
        <Searchbar/>
      </div>
      <main>
        <MasonryRoot class="pb-2.5 ">
          <MasonryItem v-for="image in items" :src="item.src" :aspect="item.aspect"/>
        </MasonryRoot>
      </main>
    </Scrollview>
  </div>
</template>

Mobile

Featured

Nature

People

Search

200 x 600

Desktop

Featured

Nature

People

Search

200 x 600

MasonryItem

Properties

src

aspect

1.5

alt

Aerial tropical beach

Frame

Position

auto

Offset

0

0

Size

200

600

auto

auto

xy

Corner

lg

Layout

Spacing

Padding

0

0

xy

Appearance

Fill

Border

Effects

Typography

In Sync

Design and code, always in sync

Your design is saved as real production-ready code, with no export steps in between. Invisibly, in the background.

Build together

Designers and developers open the same Vue files. Designers edit the visual layout while developers build the logic. Every change gets saved to code.

Pixel-perfect in production

What you see on the canvas is exactly what gets published to production.

Local-first

Your project lives in a folder on your device. Not locked on a server you don't control.

No export steps, no AI credits

Your design is loaded from code and saved to code using predictable algorithms, with no steps in between - the code is your data format. You change the design, the code updates. Someone changes the code, your design updates.

Always up to date

Your project is a regular Git repository which you can share with the rest of your team. Pull the latest code changes from production and your design is updated instantly.

Share everything

Components, design tokens, even color space. All exactly the same for designers and developers: it's the same code.

Design

Keep your design freedom

The same canvas, workflow, and tools you are used to.

Edit every style

Fine-grained control over every color, spacing, layout, and other styles.

Fill

Indigo 500

Width

135px

Height

Fit

Align

Opacity

100

Blend

Overlay

Shadow

Large

Padding

5

Spacing

Wide

Size

xl

Border

Solid

Corner

Round

Indigo 100

Indigo 200

Indigo 300

Indigo 400

Indigo 500

Indigo 600

Indigo 700

Indigo 800

Indigo 900

36

32

28

24

20

16

14

12

Design tokens

Use Tailwind design tokens or select arbitrary styles for full freedom.

Freeform shapes

Drag shapes around and resize them freely on the canvas.

5

Auto-layout

Frames that resize and layout content automatically, with precise control over alignment and spacing.

Breakpoints and states

View breakpoints and states side-by-side and edit them separately.

Mobile

Featured

Nature

People

Search

200 x 600

Desktop

Featured

Nature

People

Search

200 x 600

AI

Design together with AI

Your entire project is accessible locally on your device by any AI agent. All editable in standard Vue and Tailwind code.

\~/projects/pinboard

Change the nav layout to a sidebar, there are too many links for a small screen to use a horizontal layout

✓Read src/components/Nav.vue

✓Read src/components/NavItem.vue

✓Wrote src/components/Nav.vue

src/components/Nav.vue

\- <nav class="flex gap-8">

\+ <nav class="flex md:gap-8">

\+ <button class="md:hidden" @click="open = !open">☰</button>

\+ <ul :class="open ? 'flex' : 'hidden'" class="md:flex flex-col md:flex-row absolute md:static inset-x-0 top-14 bg-neutral-900 md:bg-transparent">

\+ </ul>

The links won't fit past \~380px, so below md the nav collapses into a left sidebar that slides in over a dimmed backdrop.

Want the sidebar to push the page content over, or overlay it like this?

Write a message...

Mobile

Featured

Nature

People

Search

200 x 600

Desktop

Featured

Nature

People

Search

200 x 600

Use any agent

Point any AI agent at the project folder on your device to make changes. Timeful automatically updates your design whenever changes are made to the code.

Your AI already knows Timeful

Timeful works with a regular Vue and Tailwind codebase. Everything is accessible as context, with no proprietery formats, frameworks, or servers in between.

Code

Production-ready code,

yours to publish anywhere

Timeful saves regular code to a folder on your device. Nothing is locked behind an export or server.

You own the code

The code for your designs is saved on your device as regular Vue components.

Publish anywhere

Publish or share your codebase anywhere. There is no custom code and no proprietary file formats that lock you in.

Clean diffs

Timeful makes the minimal possible edits. If you change a style, only 1 line of code changes. Even existing code formatting is kept.

Collaborate via Git

Push and pull your changes to Git to collaborate, or revert to a previous version.

Frequently

Asked Questions

Code

Which versions of Vue and Tailwind are supported?

Timeful supports Vue 3 using the composition API in Single-File-Components, as well as Tailwind CSS version 3.

Does Timeful work with build tools like Vite?

Yes, you can use any Vite setup and plugins in Timeful.

Does Timeful work with frameworks like Nuxt?

Yes, Timeful works with Nuxt.

What kind of Vue code does Timeful generate?

Timeful generates clean, formatted Vue code with Tailwind utility classes. It only modifies the template block and leaves your script block and logic untouched. Existing code formatting is kept and only the modified elements are reformatted.

Does Timeful work with React?

Not yet. The current version of Timeful works with Vue and Tailwind.

Sync

How does the two-way sync work with Git?

Timeful acts like a local visual IDE. When you make a change on the canvas, it writes directly to your local files. You commit and push those changes to your Git repository using your existing workflow.

Does Timeful store our source code on its servers?

No. Your code stays in your local repository and your version control system. Timeful runs locally, ensuring your intellectual property and source code remain completely secure.

Design

Can I import my existing designs directly from Figma?

No. While Timeful features a Figma-like interface to reduce the learning curve, it operates directly on Vue files rather than importing static design layers. You can use a Figma plugin to export your design to Vue code, or rebuild components while using your Figma file as reference.

Does Timeful support custom Tailwind configurations and plugins?

Not yet. Timeful uses the default Tailwind configuration.

Try Timeful now

Download for Mac

Free trial. No credit card required

www.timeful.io · 13 images · 4 links

Comments (0)

No comments yet