The latest articles on DEV Community by Ruslan Railian (@ruslan_railian_ceecd0bf87). https://dev.to/ruslan_railian_ceecd0bf87 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4225987%2F3f922536-a9f7-4b83-b3d9-8976f841a92f.jpg https://dev.to/ruslan_railian_ceecd0bf87 en Ruslan Railian Wed, 04 Nov 2026 11:35:49 +0000 https://dev.to/ruslan_railian_ceecd0bf87/a-visual-canvas-for-your-existing-expo-repo-synced-both-ways-39fk https://dev.to/ruslan_railian_ceecd0bf87/a-visual-canvas-for-your-existing-expo-repo-synced-both-ways-39fk <p>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.</p> <h2> What Mapples is </h2> <p>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.</p> <h2> Two-way sync </h2> <p>The part we care about most is the sync. The Mapples CLI connects a project on the canvas to a local repo:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npx mapples init <span class="c"># connect an existing Expo repo</span> npx mapples <span class="nb">sync</span> <span class="c"># pull canvas changes into the repo</span> npx mapples watch <span class="c"># keep them in step while you work</span> </code></pre> </div> <p>Change a screen on the canvas, and the file changes. Change the file, and the canvas updates. <code>adopt</code> brings existing screens under the canvas, and <code>doctor</code> checks the setup.</p> <blockquote> <p>TODO (Olek): add one concrete example here. Which file changes when you move a button? Show a 5-line diff.</p> </blockquote> <h2> Design system first </h2> <p>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.</p> <h2> Open source parts </h2> <p>The <code>@mapples/*</code> packages are MIT and on npm: <code>@mapples/ui</code>, <code>@mapples/style</code>, <code>@mapples/form</code>, <code>@mapples/state</code>, <code>@mapples/render</code>, and others. The Styler and Forms libraries work on their own in any React Native app, with or without the canvas. Source: <a href="https://github.com/mapplesorg/mapples-open-kit" rel="noopener noreferrer">https://github.com/mapplesorg/mapples-open-kit</a></p> <h2> Preview on a device </h2> <p>The Mapples Preview app (iOS and Android) shows your pages on a real device without a full build.</p> <h2> Where we are </h2> <p>Mapples is in beta. There is a free plan. We are a small team and we read every message on Discord: <a href="https://discord.gg/pA6EtDGbDg" rel="noopener noreferrer">https://discord.gg/pA6EtDGbDg</a></p> <p>Try it: <a href="https://mapples.org" rel="noopener noreferrer">https://mapples.org</a> · Docs: <a href="https://docs.mapples.org" rel="noopener noreferrer">https://docs.mapples.org</a></p> <p>What would make you trust a visual builder with your repo? Tell us in the comments.</p> reactnative expo showdev webdev