<p style="margin-bottom: 0; padding-bottom: 0"> <a href="https://monarchapp.io"> <img src="https://raw.githubusercontent.com/Dropsource/monarch/master/_assets/monarch-logo.png" alt="Monarch" height="80" /> </a> </p>

Monarch

Build high-quality UIs with ease. Monarch is an open source tool for building Flutter widgets in isolation. It makes it easy to build, test and debug complex UIs.

<!-- <p align="center"> <a href="https://www.youtube.com/watch?v=yblMOMfbZno" target="_blank"> <img src="https://img.youtube.com/vi/yblMOMfbZno/0.jpg" alt="Monarch Intro Video"> </a> </p> -->

Documentation

• Getting Started
• Install Monarch
• Write your first story
• Learn more

Sample projects

The Monarch Samples repo is a curated collection of sample projects which show Monarch working with various packages, patterns and tools.

Community

• For announcements about new releases subscribe to our newsletter
• Follow us on Twitter @monarch_app
• If you have any questions or run into any issues, please create an issue in this repo.

Contributing

We welcome pull requests and stars! Read our contributing guide to get started.

About Monarch

Monarch is an open source tool for building Flutter widgets in isolation. It makes it easy to build, test and debug complex UIs.

Monarch is inspired by Storybook.

Build widgets faster

Write stories
Write stories to isolate your widgets. Then preview stories without running your app or backend.

Browse your stories
Monarch lets you verify your UI without an emulator—free up memory and resources.

<p align="center"> <img src="https://raw.githubusercontent.com/Dropsource/monarch/master/_assets/monarch-build.gif" alt="Build widgets faster with Monarch"> </p>

Find and fix bugs with ease

Find bugs
Stories render edge cases with little effort. Mock dependencies to render visual states that are hard to reproduce.

Fix bugs
From your stories, navigate to your code to fix bugs. Monarch renders your fixes faster than an emulator.

Test your UI
Reuse your stories from your widget tests.

<p align="center"> <img src="https://raw.githubusercontent.com/Dropsource/monarch/master/_assets/monarch-fix.gif" alt="Find and fix bugs with ease"> </p>

Build responsive UIs easily

See your widgets in different modes
Make sure your UI works across multiple devices, text scales, languages, and themes.

Hot reload your changes
Tune your UI easily with hot reload. Monarch automatically reloads your changes.

<p align="center"> <img src="https://raw.githubusercontent.com/Dropsource/monarch/master/_assets/monarch-knobs.gif" alt="Build responsive UIs easily"> </p>

Debug widgets in isolation

Visual Debugging
Fine-tune animations, fix layout issues, align text. Find images using too much memory.

Debug in isolation
Debug widgets without running your app or backend. And Use DevTools.

<p align="center"> <img src="https://raw.githubusercontent.com/Dropsource/monarch/master/_assets/monarch-debug.gif" alt="Build responsive UIs easily"> </p>