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.
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
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.
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>
Show your Dart & Flutter projects off to the world by embedding the lightweight editor directly in your websites. Zero setup or configuration required.
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 with Zapp! using our remote build service with lightning fast builds and zero overhead.
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.
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.
import 'package:flutter/material.dart';
import 'package:fl'
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:
View and debug your application logs in real-time, directly from your application.
Multiple file support is possible via a familar file explorer interface. Add, delete or rename files and folders with ease.
Sign in
Don't have an account? Register
Password
Share your Flutter application with the world via a hosted URL. Build, run and preview with zero configuration.
Import Dart & Flutter projects directly from pub.dev or GitHub - import, fork and share.
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:
A simple way to access state from anywhere in your application while robust and testable.
Import →
Import projects directly from a GitHub repository - branches, refs, commits & sub-directories are all supported with no additional configuration.
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.
<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>
<script>
// Import the Zapp! JS analyzer
const analyer = await import('https://cdn.zapp.run/analyer.min.js');
// Load a file system into the analyzer
await analyer.loadFileSystem({
'pubspec.yaml': '...',
'lib/main.dart': '...',
});
// Run the analyzer and get the output
const output = await analyer.run();
</script>
$ curl -X POST -F "archive=@my_flutter_app.zip" "https://api.zapp.page/build"
{"status":"OK","job":"2e6f3053-ffca-4806-8fc3-7c6a2c711bab"}
$ curl -X GET "https://api.zapp.page/build/status?id=2e6f3053-ffca-4806-8fc3-7c6a2c711bab"
{"status":"OK","state":"QUEUED"}
$ curl -X GET "https://api.zapp.page/build/status?id=2e6f3053-ffca-4806-8fc3-7c6a2c711bab"
{"status":"OK","state":"COMPLETE"}
# .github/workflows/preview.yaml
name: 'Build Preview'
on:
pull_request:
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