DEV Community

Cover image for A visual canvas for your existing Expo repo, synced both ways
Ruslan Railian
Ruslan Railian

Posted on

A visual canvas for your existing Expo repo, synced both ways

Most mobile app builders make you choose. A no-code tool gives you speed and takes your code. A design tool gives you pixels and no code. We wanted a third option for React Native developers: a canvas that lives next to the repo you already have.

What Mapples is

Mapples is a visual builder for Expo and React Native apps. You design screens on a canvas. The output is standard Expo code with Expo Router. You can open it, edit it, and ship it like any other Expo project.

Two-way sync

The part we care about most is the sync. The Mapples CLI connects a project on the canvas to a local repo:

npx mapples init    # connect an existing Expo repo
npx mapples sync    # pull canvas changes into the repo
npx mapples watch   # keep them in step while you work
Enter fullscreen mode Exit fullscreen mode

Change a screen on the canvas, and the file changes. Change the file, and the canvas updates. adopt brings existing screens under the canvas, and doctor checks the setup.

TODO (Olek): add one concrete example here. Which file changes when you move a button? Show a 5-line diff.

Design system first

Colors, typography, and sizing are tokens that every screen shares. One restyle updates all screens. The same tokens are what the MCP connector exposes, so Claude Code or Cursor can read and update them.

Open source parts

The @mapples/* packages are MIT and on npm: @mapples/ui, @mapples/style, @mapples/form, @mapples/state, @mapples/render, and others. The Styler and Forms libraries work on their own in any React Native app, with or without the canvas. Source: https://github.com/mapplesorg/mapples-open-kit

Preview on a device

The Mapples Preview app (iOS and Android) shows your pages on a real device without a full build.

Where we are

Mapples is in beta. There is a free plan. We are a small team and we read every message on Discord: https://discord.gg/pA6EtDGbDg

Try it: https://mapples.org · Docs: https://docs.mapples.org

What would make you trust a visual builder with your repo? Tell us in the comments.

Top comments (1)

Collapse
 
svgicons profile image
Svg/icons •

I'd include an SVG icon in the round-trip test: after two syncs, its viewBox and stroke width should match the source.