Vector editing
Draw it or type it. Every node is yours.
Your
Full-Stack
Motion Editor
Where artists and developers finally meet. Vector art, animation and video in one place. Type a sentence or draw it yourself, then ship it as React, Vue, Angular, HTML or MP4.
Video editing
Cut, layer and animate over video.
Blazing fast engine
A 45 KB runtime that keeps up with your screen.
Animation
A real timeline, not a prompt.
React
Mike.tsx
import Mike from "./Mike"; <Mike style={{ width: 240 }} /> const anim = useRef<MikeHandle>(null); <Mike ref={anim} /> anim.current?.player?.play();
Export to anything
React, Vue, Angular, HTML, MP4 or GIF.
trigger
Smart playback
Plays only what is on screen.
Export to
Stew Engine
See the code run.
Super light and blazing fast. Move your mouse and every line lights up the moment it plays.
Under 40 KBNo other dependenciesWorks with any framework
Move your mouse
Grab things
Stew Engine
Start for freeGrab it. Drag it. Play with it.
Every kind of interaction, running live on the blazing new Stew Engine. Go on, try it out.
AI image tools hand you frozen pixels.
02The problem 02 / 03
Pro vector and motion tools take years to master.
Placeholder
And your project needed that asset yesterday.
✦The fix
So we built Stew.
A full SVG animation editor. Type a sentence and get a real vector - every layer named, every node editable. Animate it on a real timeline and export a React component your codebase can use today.
see what it cooks upWatch it cook
Sentence in. Motion out.
A real animation editor, with AI as the sous chef. Chat when you want, edit every layer yourself, export production code. This is not a mockup.
Super Simple.
No Limits.
Generate an SVG and edit it on the spot: every layer named, every node draggable. There is no limit to what you can create.
No pen-tool PhD, no import/export dance. One canvas from first word to final asset.
Cute Cat
Cute Banana
Cute Couple
Cute Dog
Cute Chick
Cute Apple
Cute Bird
Cute Raccoon
Angry Hedgehog
Cute Spider
Cute Bug
Nice House
A Full Motion Engine.
Timeline. Keyframes. Easing.
Not a preset pack: a real timeline with keyframes, easing, motion paths, morphs, warp cages and bone rigs.
Every part is grouped meaningfully, so posing and animating feels like After Effects - minus the learning curve.
Placeholder
Export to React.
Straight Into Your Codebase.
One click turns your animated vector into a production-ready React component, or clean raw SVG.
Readable code, named layers, no messy exports. Paste it in and ship.
Raccoon.tsx
1import { useLayoutEffect, useRef } from 'react';2import { mount } from '@stew-engine/player';34// the timeline you built in Stew, as data5const SCENE = { v: 1, doc: { duration: 1.2, tracks: [6 { targetUid: 'tail', property: 'rotate', keyframes: [7 { time: 0, value: 0, easing: 'sine.inOut' },8 { time: 0.6, value: 12, easing: 'sine.inOut' },9 { time: 1.2, value: 0 },10 ] },11 /* ...the ears and the body */12] } };1314export const Raccoon = () => {15 const ref = useRef(null);1617 // Stew Engine plays it on your artwork18 useLayoutEffect(() => {19 const scene = mount(ref.current, SCENE);20 return () => scene.destroy();21 }, []);2223 return (24 <svg ref={ref} viewBox="0 0 375 375">25 <g id="body">{/* ... */}</g>26 <g id="tail">{/* ... */}</g>27 <g id="left_ear">{/* ... */}</g>28 {/* every layer named + editable */}29 </svg>30 );31};Infinite Scaling.
Crystal Clear.
Resolution independent vector graphics ensure your assets look crisp on any screen size.
Scale from a tiny icon to a massive billboard perfectly.
Super Simple.
No Limits.
Generate an SVG and edit it on the spot: every layer named, every node draggable. There is no limit to what you can create.
No pen-tool PhD, no import/export dance. One canvas from first word to final asset.
Cute Cat
Cute Banana
Cute Couple
Cute Dog
Cute Chick
Cute Apple
Cute Bird
Cute Raccoon
Angry Hedgehog
Cute Spider
Cute Bug
Nice House
Placeholder
Raccoon.tsx
1import { useLayoutEffect, useRef } from 'react';2import { mount } from '@stew-engine/player';34// the timeline you built in Stew, as data5const SCENE = { v: 1, doc: { duration: 1.2, tracks: [6 { targetUid: 'tail', property: 'rotate', keyframes: [7 { time: 0, value: 0, easing: 'sine.inOut' },8 { time: 0.6, value: 12, easing: 'sine.inOut' },9 { time: 1.2, value: 0 },10 ] },11 /* ...the ears and the body */12] } };1314export const Raccoon = () => {15 const ref = useRef(null);1617 // Stew Engine plays it on your artwork18 useLayoutEffect(() => {19 const scene = mount(ref.current, SCENE);20 return () => scene.destroy();21 }, []);2223 return (24 <svg ref={ref} viewBox="0 0 375 375">25 <g id="body">{/* ... */}</g>26 <g id="tail">{/* ... */}</g>27 <g id="left_ear">{/* ... */}</g>28 {/* every layer named + editable */}29 </svg>30 );31};No excuses
Start animating now
Your first animated vector is one sentence away.