Do I need to register or log in to use it?

No. Open the editor and start designing right away — data is stored in your browser. Log in only when you want to use AI generation and real-time collaboration.

Where is my design data stored?

When signed out, data is stored locally in your browser and never leaves your device. After logging in, data is stored in the cloud and survives refreshes and browser closures.

Which export formats are supported?

The current page can be exported as PNG or JPEG, and a whole project can be downloaded as a ZIP — connectors, charts and all styles are fully preserved.

Can multiple people edit together?

Yes. Log in, create a project and invite members — everyone edits the same canvas in real time, with owner, editor and read-only roles.

Which charts and flowcharts can I draw?

30+ built-in components including text, forms, five chart types (bar, line, area, pie, radar) and 13 flowchart shapes, with connectors that auto-route around every component.

yoyoo - Free UI Design Tool with AI & Collaboration

Four core capabilities, from idea to output

WYSIWYG: drag prototypes together, connect structures, generate pages with AI, collaborate in real time.

High-Fidelity UX/UI

Drag components and assemble near-final pages

Text, buttons, forms, charts, tables, images, icons — 30+ built-in components ready to drop in; position, size, background, border, radius, shadow and animation configured visually item by item, with double-click in-place editing. Multi-page designs with independent sizes and backgrounds, alignment guides, snapping, and rubber-band multi-select — you draw interactive design specs, not wireframe sketches.

30+ built-in components, forms and data charts ready to use
Background / border / radius / shadow / animation — full property editing
Multi-page management, WYSIWYG on one screen

yoyoo dragging components to edit a high-fidelity page prototype

Flowcharts · Mind Maps

Auto-routing connectors — focus on content and structure

13 flowchart shapes built in: decision diamonds, start/end capsules, input/output parallelograms, database cylinders, person nodes… double-click to label. Two line types — bezier curves and orthogonal polylines — and the orthogonal style automatically routes around every component on the canvas, so arrows never cross content; connectors follow components live as they move and resize. Flowcharts, architecture diagrams and mind maps are just two actions: drop nodes and connect.

13 flowchart shapes + double-click labels
Global obstacle-avoiding routing — lines never cross components
Zero sync overhead, connectors follow moves and resizes automatically

yoyoo mind map and flowchart with auto-routing connectors

AI Generation

Describe it in one sentence — AI builds the page

Once logged in, describe your needs in the AI assistant — “make a login page”, “add a bar chart of the last six months of sales” — and it creates pages, adds components and edits properties. The result lands on the canvas ready for further editing. Page data is plain JSON (component tree + properties + connectors), so any AI tool can generate a page from the data-structure doc and import it too.

Natural-language page creation, component add/edit/remove
Generated results land on the canvas, ready for manual fine-tuning
Open JSON data format — external AI tools can generate pages too

yoyoo AI assistant generating a page from a chat prompt

Real-Time Collaboration

One project, a team editing together in real time

Log in, create a project and invite members with owner / editor / read-only roles — everyone edits the same canvas simultaneously with field-level incremental merging so nothing is overwritten. No account? The guest mode drops you straight into the editor with fully working local data, and after logging in your local pages migrate into a collaboration project in one click. The collaboration server is open-source and self-hostable — your data stays on your own servers.

Member invitations + roles + read-only mode
Multi-user same-canvas editing with real-time sync
Guest mode with no signup; seamless migration after login

Who it's for

From idea to delivery — the right tool for every role

🧑‍🎨

Product / Designers

Produce high-fidelity prototypes and flowcharts fast, discuss interaction and information architecture with the team, and drop exported images straight into documents and reviews.

🧑‍💻

Frontend Developers

Assemble page skeletons visually, express module dependencies with connectors, configure charts and tables directly with data — a design spec that doubles as a structure diagram.

🎓

Teaching / Presentations

Draw architecture diagrams, mind maps and dashboard prototypes with zero install and zero cost; document illustrations without switching between multiple tools.

High-Fidelity UX/UI Design, Flowcharts & Mind Maps
One canvas for the whole design workflow