Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

WIP design tool: - generate new types of editable interactive objects - place them on a canvas - publish to web

nate parrott

61,116 subscribers

14,474 views • 2 years ago •via X (Twitter)

Science & Technology Education Arts

Anya Rossi• Live Now

Private livecam show

10 Comments

Mahdi Farra2 years ago

looks fun! i wanna play with this

nate parrott2 years ago

soon! in dns hell rn

Jan2 years ago

looks good

Kenny2 years ago

are you building instagram story builder, but as websites, for the browser? always wanted that

nate parrott2 years ago

I’ve been thinking about it as Figma but for html (with generated code mixed in)

Alex Danilowicz2 years ago

Very cool!! Building a canvas is not easy! working on something similar :)

Murat Sutunc2 years ago

looks cool :) looking forward to playing with it

EcoTech Aiden2 years ago

great example of empowering creators through interactive design tools! would love to see where this goes

Pung Worathiti2 years ago

Cool stuff! Remind me of !

Austin Guevara2 years ago

Just making your own Webflow from scratch real quick eh?

Related Videos

Introducing Code on Canvas in AI design tool for Claude and Codex. Design ❤️ Code are officially in a relationship, opening new ways to create on canvas. Ask agent to generate custom design tools inside Pencil on the fly, create interactive components, generative art and more, but still keep the full manual design control. This is just the beginning. Let us know what you think. And let's take it to the next level together. Download the new Pencil update today.

Introducing Code on Canvas in AI design tool for Claude and Codex. Design ❤️ Code are officially in a relationship, opening new ways to create on canvas. Ask agent to generate custom design tools inside Pencil on the fly, create interactive components, generative art and more, but still keep the full manual design control. This is just the beginning. Let us know what you think. And let's take it to the next level together. Download the new Pencil update today.

Tom Krcha

80,204 views • 5 months ago

Hundreds of full web apps, all rendered live on a single canvas, delivering the same performance you’d expect from static images. Coming soon to the best design tool near you.

Hundreds of full web apps, all rendered live on a single canvas, delivering the same performance you’d expect from static images. Coming soon to the best design tool near you.

Pietro Schirano

50,443 views • 1 year ago

📄 Turning Framer from a web builder into a true design tool with Design Pages. Explore freely without contraints. When you’re ready, publish to the web in a single click. Unlimited projects, unlimited pages. Completely free.

📄 Turning Framer from a web builder into a true design tool with Design Pages. Explore freely without contraints. When you’re ready, publish to the web in a single click. Unlimited projects, unlimited pages. Completely free.

Framer

323,461 views • 1 year ago

Now you can use AI agents to design directly on the Figma canvas, with our new use_figma MCP tool and skills to teach them. Open beta starts today.

Now you can use AI agents to design directly on the Figma canvas, with our new use_figma MCP tool and skills to teach them. Open beta starts today.

Figma

17,869,252 views • 5 months ago

Copy code-backed screens → paste as design layers, now with variables → Copy your Make onto the canvas as design layers → Generate a design through the Figma MCP server → Capture your webpage as editable layers with the Chrome extension

Copy code-backed screens → paste as design layers, now with variables → Copy your Make onto the canvas as design layers → Generate a design through the Figma MCP server → Capture your webpage as editable layers with the Chrome extension

Figma

42,136 views • 2 months ago

Art on Contract: last year I wrote an interactive tool to generate ASCII-art for TITLES’s series of smart contracts. A short thread ↓

Art on Contract: last year I wrote an interactive tool to generate ASCII-art for TITLES’s series of smart contracts. A short thread ↓

ertdfgcvb 𓅰 𓅬 𓅭 𓅮 𓅯

100,564 views • 1 year ago

You've never vibe coded like this before. Replit ⠕ is now your canvas for building & creating. In this video I'm building a graphics shader app. I click Replit's canvas button and see the live app running on infinite editable canvas, generate several design variants in parallel side by side, bring one back into my app. Just 1 of the things we shipped.

You've never vibe coded like this before. Replit ⠕ is now your canvas for building & creating. In this video I'm building a graphics shader app. I click Replit's canvas button and see the live app running on infinite editable canvas, generate several design variants in parallel side by side, bring one back into my app. Just 1 of the things we shipped.

jordwalke

188,333 views • 6 months ago

Gave Gemini 3 Deep Think an image of a 3D spider web and asked for an interactive design tool. It generated a full design suite (procedural control, simulation, optimization) with STL export capability. I used it to engineer new metamaterials and a spider-web inspired bridge design, 3D printed it, then validated the structural integrity with a NVIDIA DGX Spark load test. A mind-blowing example of the future of material and architecture design - image in, fabrication-ready design out! Google Gemini

Gave Gemini 3 Deep Think an image of a 3D spider web and asked for an interactive design tool. It generated a full design suite (procedural control, simulation, optimization) with STL export capability. I used it to engineer new metamaterials and a spider-web inspired bridge design, 3D printed it, then validated the structural integrity with a NVIDIA DGX Spark load test. A mind-blowing example of the future of material and architecture design - image in, fabrication-ready design out! Google Gemini

Markus J. Buehler

98,719 views • 7 months ago

1/ Millions today, trillions tomorrow. The number of digital objects is about to explode Announcing a tool for exploring this universe: artists get discovered & collectors find new art. The first iteration of a powerful tool Deca is your place to discover digital objects (🔊!)

1/ Millions today, trillions tomorrow. The number of digital objects is about to explode Announcing a tool for exploring this universe: artists get discovered & collectors find new art. The first iteration of a powerful tool Deca is your place to discover digital objects (🔊!)

Deca 🟥 🟩 ⬛ 🟪

55,801 views • 3 years ago

when DePIN teams start protocol design, the public tooling & foundational literature available to them is scarce, esp when compared to verticals like DeFi. to close that gap, we built an interactive tool to get a pulse check on any DePIN network design & test new features quickly

when DePIN teams start protocol design, the public tooling & foundational literature available to them is scarce, esp when compared to verticals like DeFi. to close that gap, we built an interactive tool to get a pulse check on any DePIN network design & test new features quickly

mustafa

137,844 views • 1 year ago

People often ask if Rive is a design tool, an animation tool, or a competitor to Figma, After Effects, or Lottie. It’s none of those. Rive is a new way to design, build, and ship user interfaces with animation. It combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. This end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.

People often ask if Rive is a design tool, an animation tool, or a competitor to Figma, After Effects, or Lottie. It’s none of those. Rive is a new way to design, build, and ship user interfaces with animation. It combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. This end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build award-winning interactive experiences across apps, games, websites, products, and vehicles.

Guido Rosso

59,850 views • 1 year ago

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

been making a design tool where you and AI agents design together... claude code, cursor, or any cli agent can join the canvas and build with u infinite canvas, real components, everything in tailwind + html so you can just copy the code + eventually publish like any other site too

Pablo Stanley

21,605 views • 6 months ago

Introducing Skywork Design. We moved the design capability of Skywork onto an infinite canvas. Describe what you want. Skywork Design lays out a full set of pages — homepage, flows, dashboard — on one canvas. Iterate page by page; lock your brand assets so every page stays consistent. Hand it back to the Skywork agent to publish as a live website all in one workflow.

Skywork

968,062 views • 3 months ago

We just shipped a major design update to Base44 - built to help you make something that's truly yours. Collaborate on a shared canvas, restyle your app's entire look in seconds, and generate assets right where you need them. It's a new playing field for designing with AI.

We just shipped a major design update to Base44 - built to help you make something that's truly yours. Collaborate on a shared canvas, restyle your app's entire look in seconds, and generate assets right where you need them. It's a new playing field for designing with AI.

Base44

554,541 views • 4 months ago

Magnific Plugin now available on Figma → Generate images with the latest models → Text-to-vector and editable layers → The magnific upscaler, up to 16x, on your canvas → Relight, change camera, remove backgrounds without a reshoot Open it directly on Figma

Magnific Plugin now available on Figma → Generate images with the latest models → Text-to-vector and editable layers → The magnific upscaler, up to 16x, on your canvas → Relight, change camera, remove backgrounds without a reshoot Open it directly on Figma

Magnific

33,485 views • 2 months ago

New interactive map tool🌎 We created a tool to illustrate the extent to which US restrictions on Ukraine’s use of ATACMS constrain Ukraine’s ability to strike important military infrastructure in Russia. Link to tool:

New interactive map tool🌎 We created a tool to illustrate the extent to which US restrictions on Ukraine’s use of ATACMS constrain Ukraine’s ability to strike important military infrastructure in Russia. Link to tool:

George Barros

496,347 views • 2 years ago

The new o1 canvas is quite impressive: "create an interactive tool that visually shows me how correlation works, and why correlation alone is not a great descriptor of the underlying data in many cases. make it accessible to nonmath people and highly interactive and engaging"

The new o1 canvas is quite impressive: "create an interactive tool that visually shows me how correlation works, and why correlation alone is not a great descriptor of the underlying data in many cases. make it accessible to nonmath people and highly interactive and engaging"

Ethan Mollick

137,714 views • 1 year ago

New Pi extension: pi-design-deck, a tool for visual design decision making. Opens a multi-slide deck in your browser with live previews of each option. Compare, pick, or generate more options. pi install npm:pi-design-deck

New Pi extension: pi-design-deck, a tool for visual design decision making. Opens a multi-slide deck in your browser with live previews of each option. Compare, pick, or generate more options. pi install npm:pi-design-deck

Nico Bailon

87,337 views • 6 months ago