An online Dart & Flutter sandbox for

Zapp! is a free online sandbox environment for building & sharing Dart & Flutter applications, supporting all pub.dev packages, static analysis , embedding, previewing and much more.

Built for developers

Zero configuration Dart & Flutter development at your fingertips

firebase_core: ^2.4.1
firebase_auth: ^4.2.5
flame: ^1.5.0
riverpod: ^2.0.0
hooks_riverpod: ^2.0.0
logging: ^1.1.0

pub.dev

Import any package from pub.dev

Import packages from pub.dev and import them in your project, just like you would in a local Flutter project. Sampling packages has never been easier.

Learn more

pubspec.yaml X
main.dart
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
name: my_awesome_app
description: A new Flutter project.

environment:
  sdk: ">=2.18.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  riverpod: ^2.0.0
  hooks_riverpod: ^2.0.0

All web compatible packages from pub.dev are supported, including remote assets. Update your pubspec.yaml file with the package name and version and build your application.

<meta charset="UTF-8">
  <title>Awesome Docs</title>
</head>
<body>
  <iframe src="https://" />
</body>

Embed

Embed your projects anywhere

Show your Dart & Flutter projects off to the world by embedding the lightweight editor directly in your websites. Zero setup or configuration required.

Learn more

Embed your project via a iframe into any 3rd party website. Perfect for websites, showcases, documentation and more. Configure your embed to fit your website theme, show off just your code or the UI.

jobs:
 zapp_preview:
   runs-on: ubuntu-latest
   env:
     ZAPP_API_KEY: ${{ secrets.ZAPP_API_KEY }}
   steps:
     - uses: invertase/zapp-github-preview@v1
       with:
         buildTarget: ./lib/main.dart

Integrate

Integrate with any service

Integrate with Zapp! using our remote build service with lightning fast builds and zero overhead.

Learn more

Task
Status
Time
Git Clone
-
-
Pub Install
-
-
Flutter Build
-
-
Assets
-
-
Deploy
-
-

Our one of a kind remote build service leverages the Zapp! compiler to provide lightning fast builds. Get in touch oss@invertase.io to find out more.

Developer Tooling

The power of Dart & Flutter,
without leaving your browser

Zapp! brings together the much loved Dart & Flutter developer tooling directly into your browser. Analyze, Compile, Debug and Preview your projects directly from your browser.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
import 'package:flutter/material.dart';
import 'package:fl'
---------------------------
  • package:fl
  • package:flutter/animation.dart
  • package:flutter/cupertino.dart
  • package:flutter/foundation.dart
  • package:flutter/gestures.dart
  • package:flutter/material.dart
  • package:flutter/painting.dart

Analyze

IntelliSense

IntelliSense is built directly into the editor, allowing you to quickly preview documentation, jump to sources, apply quick fixes and more.

[12:18:32] Application bootstrapped!

[12:19:29] User signed in

[12:19:34] Navigated to `/profile` route

[12:20:54] User profile loaded (120ms)

[12:29:56] Display named updated

[12:30:01] Signed out

[12:30:02] ==================================

[12:30:02] EXCEPTION CAUGHT

[12:30:02] ==================================

[12:30:02] The following _Exception was thrown while handling a gesture:

[12:30:02] Exception: Something went wrong when signing out!

[12:30:02]

[12:30:02] When the exception was thrown, this was the stack:

DEBUG

Integrated Logs

View and debug your application logs in real-time, directly from your application.

Explorer
.dart_tool
build
lib
main.dart
README.md
pubspec.lock
pubspec.yaml

Navigate

File Explorer

Multiple file support is possible via a familar file explorer interface. Add, delete or rename files and folders with ease.

Firebase UI Example

Sign in

Don't have an account? Register

Email

Password

Sign In

PREVIEW

Instant Previews

Share your Flutter application with the world via a hosted URL. Build, run and preview with zero configuration.

Import

Instantly import from Pub & GitHub

Import Dart & Flutter projects directly from pub.dev or GitHub - import, fork and share.

PUB.DEV

Found a package on pub.dev but wondering how it works? Quickly import the packages example directly in Zapp! and try it out in your browser.

Find your favourite package below and check it out:

Invalid package name.

Riverpod

A simple way to access state from anywhere in your application while robust and testable.

v1.2.3

Import →

GITHUB

Import projects directly from a GitHub repository - branches, refs, commits & sub-directories are all supported with no additional configuration.

GitHub Import Example

Integrate

Superpower your workflow with rapid
integration flows.

Bring the power of Zapp! to your own workflow. Rapidly remote build, instantly analyze and compile your project with our powerful integrations API.

Integration is currently in private beta. Please contact us to learn more about custom integrations.

Remote build your application, up to 100x faster than traditional Flutter builds.
Analyze and compile on the browser by integrating with out JavaScript SDKs.
Integrate with our GitHub Action to build Flutter apps in record time on your CI/CD.
<script>
  // Import the Zapp! JS compiler
  const compiler = await import('https://cdn.zapp.run/compiler.min.js');

  // Load a file system into the compiler
  await compiler.loadFileSystem({
    'pubspec.yaml': '...',
    'lib/main.dart': '...',
  });

  // Update any pub dependencies
  await compiler.runPubGet();

  // Compile the Flutter app!
  const output = await compiler.run('lib/main.dart');

  // Mount the Flutter app to the DOM
  compiler.mount(output, document.getElementById('flutter-app'));
</script>

Learn more