Timeful is a visual editor for your Vue projects that works with your existing codebase. Visually edit any code file and output production-ready code for your designs.
<script setup lang="ts">
import Title from "~/components/pricing/PricingCardTitle.vue";
import Subtitle from "~/components/pricing/PricingCardSubtitle.vue";
import Price from "~/components/pricing/PricingCardPrice.vue";
import Features from "~/components/pricing/PricingCardFeatures.vue";
import Feature from "~/components/pricing/PricingCardFeature.vue";
defineProps<{
price: number
}>();
</script>
<template>
<div class="rounded-2xl border bg-white p-10 flex flex-col gap-5 relative">
<div>
<Title>Personal</Title>
<Subtitle>For individuals and small teams</Subtitle>
</div>
<Price :price="price"></Price>
<Features>
<Feature>
Unlimited files & projects
</Feature>
<Feature>
Unlimited edits <span class="font-light text-stone-500">- no tokens required</span>
</Feature>
<Feature>
Collaborate via GitHub
</Feature>
</Features>
<ButtonPrimary class="mt-5">Start a free trial</ButtonPrimary>
</div>
</template>
Use code as the
single source of truth
What you design is exactly what is published.
Your designs are expressed as the exact same HTML code that developers write. No more disconnect between your design files and the published app, they are the same.
Share design tokens between designers and developers.
Use the same Tailwind CSS design tokens between your design and the code. Your designed styles are exactly the same as the ones that will be published.
Skip developer handoff. Your design is already expressed as code.
Tweak a style and ship to production. No need to ask a developer to push pixels, they can focus on the functionality.
Freely design
every state, variant,
and breakpoint
Edit visually, on a canvas, directly in your codebase.
Just like Figma, but synced with your code.
Create reusable components
Design and use the same components as the developers on your team.
View and edit every state, variant, and breakpoint
Most risk is in the edge cases: error states, retries, empty states. Every one of these states is visible and editable in Timeful, without having to run the app.
Generate code for your
designs in real-time
Instant code changes, without the limitations of AI
Timeful generates code for your designs using a predictable algorithm. Get unlimited code edits without worrying about token usage, hallucinations, or unexpected edits.
Use modern front-end frameworks
Timeful works with modern frameworks such as Vue and Nuxt.
Extend anything
Your Timeful project is a regular GitHub repository with a Vue or Nuxt project. Add custom code and extend the project in any way you want.
True collaboration with
everyone on your team
A shared GitHub repository for everyone on your team
Link your project to a GitHub repository where designers, developers, and everyone else on your team can collaborate on your project.
Always have access to the latest published design
Sync your repository anytime to get the latest design and code for your app.
No setup required
Timeful clones your project in a safe sandboxed environment that doesn't require any setup. Select your repository and start editing immediately.
Publish anywhere
The code is yours
The codebase is yours to store and publish anywhere
Timeful syncs with a regular Git codebase stored on GitHub to which you always have access. Publish it anywhere, anytime.
Open file formats
All data is stored in standard open file formats and plain JavaScript and HTML code.
Quick iteration.