Announcing Zapp! Build Flutter apps in browser
Tags: flutter, dart, tooling, opensource
Published: 2022-07-14 11:41:22

As a Flutter or Dart developer, having an online IDE environment that allows you to create and share your prototypes as quickly as possible in a browser is important. 

You may wonder why this is even important? Having a sandbox in your browser to develop a Flutter application will open up a lot of windows, such as:

* You can share code and embed examples in your documentation
* You can rapidly prototype your idea and build an application and share it with your stack holders
* You can reproduce bugs and attach them to your issue when you open it, which will help maintainers to start debugging quickly
* You can learn different packages and save a lot of time setting up an environment; you can even share what you have learned
* You can teach Flutter and Dart without needing to set up any environment, which will speed up.  
* You can even collaborate live together on a project or prototype. 
* & perhaps so many other opportunities 

## Zapp
We proudly announce Zapp, an in-browser tool that will help you build Flutter and Dart applications in your browser. 

With Zapp, you will enjoy building Flutter apps as you make that in your favorite IDE, especially if you are a VsCode user; You will feel at home.

{% embed https://www.youtube.com/watch?v=5SOTysn_evg %}

Let's me introduce to you the most important features of Zapp,

### Adding Pub.dev packages
Add any package that supports the Web platform in Flutter and Dart to your `pubspec.yaml` file and download it right into your editor in the browser with Zapp! 

<video loop="true" autoplay="autoplay" controls muted>
  <source src="https://invertase.io/zapp-pubdev-hd.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

### IntelliSense
Zapp provides syntax highlighting and autocomplete. Step in and out of your code and find the definitions and documentation! Get code completion, parameter info, quick info, member lists, and more. 

<video loop="true" autoplay="autoplay" controls muted>
  <source src="https://invertase.io/zapp-intellisense-hd.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

### Live Preview, Unique URL
Rename your project, get a unique URL that everyone can access, and send it to your community member to preview and load it instantly! 

<video loop="true" autoplay="autoplay" controls muted>
  <source src="https://invertase.io/zapp-livepreview-hd.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

### Command Palette
Search, find your command, run it and complete your action in a second! The command palette helps you to find out your favorite activities with ease! 

<video loop="true" autoplay="autoplay" controls muted>
  <source src="https://invertase.io/zapp-commandpallete-hd.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

* **Theme:** Zapp will provide you with dark and light mode as of now, but we have in the roadmap to add "themes" in the editor where you can select what your favorite is. 
* **Logs:** You can see logs and output of the Dart analyzer. 
* **Debugging:** Zapp helps you to debug the application as quickly as possible. You may even have breakpoints and debug your application! 
* **Embedding:** You can create a rapid prototype; for example, get a minimal embedded edition of Zapp and add it to your documentation! 
* **Pair programming:** What if you can jump into one Zapp with your team, community member, or an interviewee to pair a program on a problem and get it fixed together.
* **Git features:** Edit, change, organize and see the difference under your branch management to find out what you have changed. Ready to commit and push to a different branch!
* **Run Tests:** In Zapp, you can write your tests and run them in your browser. 
* **Many more:** Many more features will be added to Zapp soon, but we would love to hear your feedback and prioritize what the community needs.

### Zapp Public Board
We are building Zapp to help the community. Therefore, we have opened [Zapp Public Board](https://github.com/orgs/invertase/projects/16), where you can see all backlogs and even help us prioritize them by giving your vote. 

## Early Access
Zapp is evolving, and we are actively developing. Hence, we now invite you to join [Zapp Early Access Program](https://invertase.link/rZqR) and help make this product even better for everyone.
Once you navigate to [zapp.run](https://invertase.link/rZqR), sign in with your Github account, then wait until your access is given. You'll be notified by email.

If you found a bug or have a feature in mind that we need to develop, please open an issue on [Github Zapp.run repository](https://github.com/invertase/zapp.run/issues) and let us know what you are looking for. We appreciate it. 

## Watch our live stream 

{% embed https://www.youtube.com/watch?v=DNJOf7aNkOI %}

## Conclusion

Stay tuned for more updates and exciting news that we will share in the future. Follow us on [Zapp_run Twitter](https://twitter.com/zapp_run),  [Invertase Twitter](https://twitter.com/invertaseio), [Invertase Linkedin](https://www.linkedin.com/company/invertase), and [Invertase Youtube](https://www.youtube.com/channel/UCmKHYC6esonv-xSYJ9i5F6g), and subscribe to our monthly newsletter to always stay up-to-date.