# www.moioapp.com > AI-optimized mirror of www.moioapp.com containing 33 pages totalling 13,348 words of clean markdown content, structured data, and semantic HTML. Original source: https://www.moioapp.com/. Last updated: 2026-05-01T14:36:59.993Z. Each page is available as HTML (with JSON-LD structured data) and Markdown (text-only, ideal for LLMs and RAG). ## Homepage - [design in full resolution](/site-root.html): Design tools do visuals. Code tools do behavior. Moio does both. Build interactions on canvas, see them run as HTML. Stop describing what you could just design. (196 words) ## Articles & Blog Posts - [How it works](/docs/core-concepts-events-and-actions/index.html): Any object on your canvas can be interactive. Select a rectangle, add a Click event with an Open URL action, run preview — you just made a button. Events and actions are how you turn static designs into working prototypes. (862 words) - [What is preview](/docs/core-concepts-preview/index.html): You've added events, actions, and behaviors to your design. Preview lets you see if it actually works — it opens your design in a separate window where everything is interactive, just as it would be for a real user. (582 words) - [The naming convention](/docs/core-concepts-interactive-states/index.html): When you hover over a button, it should look different. When a checkbox is checked, it should show a checkmark. Interactive states let you define these visual variations by naming your variants with state suffixes — Moio handles the switching automatically. (378 words) - [You've built a card component](/docs/core-concepts-data-binding/index.html): You've built a card component. Now you want to use it ten times, each with different content. Data binding lets you define inputs on your component and set different values for each instance — one component, many variations. (412 words) - [Editor](/docs/reference-keyboard-shortcuts/index.html): Shortcuts are disabled while typing in a text field. (509 words) - [Design a Component](/docs/core-concepts-components-and-behaviors/index.html): Design a button once, use it everywhere. Components let you create reusable elements — update the source and every instance updates with it. Add a behavior, and your component gains built-in interaction states like hover and checked, no extra wiring needed. (988 words) - [Creating a flex layout](/docs/core-concepts-flex-layout/index.html): Placing elements pixel by pixel works — until you need to add one more item and everything shifts. Flex layout handles arrangement automatically: set a direction and spacing, and your elements organize themselves. Add or remove items and the layout adapts. (689 words) - [Position and size](/docs/reference-layout/index.html): Every object on your canvas has a position and size. Layout controls give you precise placement with coordinates and dimensions, and constraints let you define how objects respond when their parent frame resizes — pin to an edge, stretch between edges, or scale proportionally. (533 words) - [How behaviors work](/docs/core-concepts-component-behaviors/index.html): A component set can look interactive, but without a behavior it won't do anything in preview. Behaviors bridge the gap — they connect your visual state variants (likechecked) to actual user interactions, so Moio knows when to switch between them. (547 words) - [How to crop](/docs/reference-cropping/index.html): Cropping lets you trim an image fill to show only the part you need — without replacing the image or masking it manually. (455 words) - [Import a .fig file](/docs/quick-start-import-figma/index.html): Moio can import your Figma work so you don't start from scratch. There are two ways in: import a .fig file for the full design, or copy-paste specific layers directly into the editor. (442 words) - [Selecting a font](/docs/reference-font-upload/index.html): Moio includes a library of over 1,000 Google Fonts and Noto fonts, available in the font picker when editing text. Custom font upload is not yet supported. (201 words) - [File import](/docs/reference-import-and-copy-paste-from-figma/index.html): A detailed reference for bringing Figma work into Moio — covering both file import in the dashboard and copy-paste in the editor, including placement rules, limitations, and error messages. (462 words) - [Where to share from](/docs/platform-sharing/index.html): Need someone to review your work? Want a teammate to collaborate on a project? Sharing lets you invite people with the exact level of access they need — view-only for stakeholders, edit access for collaborators. (392 words) - [Plans](/docs/platform-billing-and-plans/index.html): Moio offers a free tier for individuals and a Pro plan for teams that need more seats and advanced features. Billing is managed per workspace. (353 words) - [Permission levels](/docs/platform-teams-and-permissions/index.html): Workspaces can have multiple people — some who can edit, some who can only view, and some who can invite others. Permissions control who can do what, keeping your work organized and secure. (332 words) - [articles/were-turning-designers-into-factory-workers/index.html](/articles/were-turning-designers-into-factory-workers/index.html) (1 words) - [We Tried Using AI to Migrate Our State Management. Here's How That Went.](/articles/we-tried-using-ai-for-real-work/index.html): We asked Copilot, Cursor, GPT-4o, Gemini, and Claude to migrate our state management. One deleted our CSS. One wrote a blog post. Here's what happened. (545 words) - [More than just pictures](/articles/more-than-just-pictures/index.html): Design isn't how it looks, it's how it works. Most tools stop at visuals. Here's why interaction design needs its own canvas and what that changes for designers. (591 words) - [Switching workspaces](/docs/platform-switching-workspaces/index.html): If you're part of multiple teams or have separate personal and work spaces, you can switch between them without logging out. Each workspace is independent — its own projects, members, and settings. (282 words) - [Designers should build](/articles/designers-should-build/index.html): Designers never design the actual product. Developers do. That's about to change. How interaction design tools are closing the gap between vision and code. (387 words) - [Where is my work saved?](/docs/faq/index.html): Where is my work saved? (44 words) - [What you can do here](/docs/index.html): Welcome to the Moio user guide. This site explains the core workflows, everyday tasks, and helpful shortcuts. (72 words) - [dashboard/billing/index.html](/dashboard/billing/index.html) (1 words) - [Privacy Policy](/privacy-terms/index.html): How Moio handles your data. Read our privacy policy and terms. (1,934 words) - [signup/index.html](/signup/index.html) (1 words) - [dashboard/index.html](/dashboard/index.html) (1 words) - [2026.04.24](/docs/release-notes/index.html): 2026.04.24 (641 words) - [[We tested AI coding assistants on a real task](/content/articles/we-tried-using-ai-for-real-work/index.html)](/articles/index.html): Opinions on interaction design, AI coding tools, design systems, and why designers should own behavior. From the team building Moio. (146 words) - [About Us](/about/index.html): Design tools do visuals. Code tools do behavior. We think one tool should do both. Meet the team building Moio. (246 words) - [Support](/support/index.html): Stuck on something? Reach us on Slack or email. We respond fast. (47 words) - [Simple, honest pricing.](/pricing/index.html): Free plan includes the full editor, Figma import, and live HTML preview. Upgrade when you need multiplayer, components, and more. (76 words) ## Resources - [Full Page Index](/index.html): Browse all cached pages with rich metadata - [About This Cache](/content/about.html): Methodology, technical details, and usage guidelines - [XML Sitemap](/content/sitemap.xml): Machine-readable sitemap for crawler discovery - [Robots.txt](/content/robots.txt): Crawler directives