跳到正文
DEV Community· Ruslan Railian·· 2 小時前AI 評分56

Mapples 為既有 Expo 專案提供雙向同步的視覺畫布

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

AI 導讀

Mapples 是面向 Expo 和 React Native 應用程式的視覺化建置工具,讓畫布與既有本機 repo 雙向同步,並輸出使用 Expo Router 的標準 Expo 程式碼。

正文

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

Ruslan Railian

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

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.

來源:DEV Community · dev.to