---
title: "Building a browser-based React Native playground for Expo"
description: "We partnered with Expo to enable instant prototyping, real-device preview, and easy sharing of React Native projects, all without local setup."
url: https://www.callstack.com/case-studies/building-a-browser-based-react-native-playground-for-expo
updated: 2026-10-30T18:14:33.263Z
---

# Building a browser-based React Native playground for Expo

We partnered with Expo to enable instant prototyping, real-device preview, and easy sharing of React Native projects, all without local setup.

**Building a browser-based React Native playground**

_Client: [Expo](https://expo.dev/) · Industry: Software Development · Date: 2018 · Size: Startup_

Services: [Feature Development](https://www.callstack.com/capabilities/feature-development), [End-to-End Product Development](https://www.callstack.com/capabilities/end-to-end-product-development)

## Company: One platform for universal apps

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

## Challenge: No simple way to preview, prototype, or share React Native projects

For many developers, just trying React Native required a full local setup, installing Android Studio, Xcode, and managing CLI tooling. There was no fast way to experiment, build small prototypes, or share reproducible examples without setting up a development machine.

Expo had already improved iteration speed with tools like Expo Go, but needed a solution focused on the very first touchpoint: making it easier to try React Native without any setup.

## Our work: Building a browser-based React Native editor

To make React Native easier to try, share, and prototype, we developed a web-based editor with integrated mobile runtime and support for real-device execution, eliminating the need for local development environments.

#### **Web-based code editor**

We used Monaco Editor as the foundation and added various enhancements to improve the editing experience, such as ESLint, Prettier and TypeScript integration, various keyboard shortcut and file management. The editor runs entirely in the browser and provides an experience close to a lightweight local IDE, with no installation required.

#### **Custom Webpack-based packager with NPM support**

We collaborated with the Expo team on a custom Webpack-based packager with tailored loaders and plugins. This allows users to import most NPM modules as they would in a normal React Native project, with bundling handled behind the scenes and no additional configuration required.

#### **Code patching to avoid full bundling on change**

To avoid running Metro in the cloud or rebuilding the entire bundle after each code edit, we implemented a patching mechanism. Instead of generating full bundles, the system sends only the changed code to the device for execution. This reduced latency and made iteration significantly faster.

## Results: Fast, accessible way to prototype and share React Native code

Snack delivered on its goal of removing setup friction and making it easier to experiment with React Native. The editor now supports real-device preview, debugging, sharing, and even embedding, lowering the barrier to entry for developers, educators, and library authors.

The project is Open Source and its source can be previewed [here](https://github.com/expo/snack).

## Testimonial

> Not only does Callstack have tremendously talented engineers, but I know they care about the success of the project as much as I do. Having a true partner is a wonderful experience and gives us the ability to move so much faster than we could without them.
>
> — TC Davis, Product at Expo

## Build and scale React Native apps.

For over a decade, enterprise teams have trusted us with React and React Native products. Our senior engineers work with AI agents on new builds, complex migrations, and native engineering. [Contact us](https://www.callstack.com/contact)

### Talk to our team

We’ll connect you with the right expert within 24 hours.

## How we’ve solved similar challenges

- [Building Storybook Connect for JetBrains Twice as Fast With AI](https://www.callstack.com/case-studies/building-storybook-connect-for-jetbrains-in-25-working-days)
- [Teamworks cut mobile change lead time from days to minutes](https://www.callstack.com/case-studies/accelerating-teamworks-mobile-delivery-with-re-pack-and-module-federation)