Start for free

Export code

Alloy's export feature converts your visual prototype into a fully structured React application that you can download, run locally and share with developers. Exporting generates component-based React code—written in JavaScript or TypeScript—that reflects your prototype's screens, interactions and layout. These exports support faster handoff, easier integration into existing codebases and clearer communication of UI behavior.

What is an export?

Alloy exports visual prototypes as working, component-based React applications, written in JavaScript and TypeScript. When exporting, Alloy automatically creates components for your exported application following common React standards and best practices.

You can use these exports in handoffs to your development team. This speeds up development significantly. You can also upload exported React applications to your codebase for sharing and further refinement.

While Alloy cannot guarantee that generated prototype code is production quality, exports should be robust enough to explain interactivity and give a jump start to building the components needed to deploy working code.

Export and download a prototype

Exporting your prototype as a React app makes it easier to hand off to development or contribute directly to an existing codebase. After downloading, you can run and test the app locally, or upload it to a source code management tool like GitHub.

Prerequisites: Export code requires the Pro plan. You can upgrade your plan in Settings → Billing. See our pricing page for more details on plan features.

To export a prototype:

  1. Select Prototypes from the sidebar.
  2. Search for and select the prototype you want to view.
  3. From the top navigation bar, select Export code (the GitHub octocat icon).
  4. Select Download. Alloy generates a React application and compresses it. Your browser downloads a .zip file containing your exported React project.

Typical React app file structure

A typical React application includes:

  • A src/ folder with components, styles, assets, and app logic
  • A public/ folder with images and other publicly-accessibly assets
  • A root component (often App.js or App.tsx)
  • Routing for switching between screens/pages
  • A build system that bundles and optimizes code for production
  • Package dependencies managed by npm or yarn

Run an exported React app locally

It's best practice to test your application locally before uploading to a source code management tool or sharing with developers. React apps are relatively easy to run locally. You can preview that your components and interactions work as expected.

Prerequisites:

  • You should be comfortable with the command line and have some developer experience. If not, consider asking a developer for help (this gets a bit technical).
  • Alloy's React exports use Bun to manage dependencies and run your app. You must install Bun before attempting to run your application locally.

To run your exported React app locally:

  1. Open your terminal.
  2. Navigate to the root folder of your React project (the folder you downloaded during export).
  3. Run bun install && bun run dev.
  4. In your browser, navigate to http://localhost:5173 (or whatever port you've specified with Bun).