Welcome to flip

The UI Builder for the Flipper Zero

Effortlessly design and export user interfaces for your Flipper Zero applications.

Getting Started

Begin by designing your UI using our intuitive builder. Once you are satisfied with the design, export it as a JSON file. This JSON can be directly used with the specified Rust crate to integrate into your Flipper Zero application.

Views

Every possible user interface is build from multiple Views. That's like a slide a in a presentation and multiple Slides are building the whole presentation. A View can be different types: Either a Message, Alert, Browser or Input. Every View comes with their own UI Elements which can be hidden (Message) or just edited (All).

Events

All buttons can have events. An event can be a function you defined in your Rust code or a predefined event (in the proc macro), which currently are: none, next, back and close. Events can do internal logic or switch to a certain view e.g. using next for going to the next View.

Integration with Rust

To integrate the exported JSON into your Flipper Zero app, use our dedicated Rust crate. Simply include the crate in your project and load the JSON to render the UI components (don't forget to pass in your functions).

Example:

#![no_main]
#![no_std]

// Required for panic handler
extern crate flipperzero_rt;

use core::ffi::CStr;
use flip_ui_macro::flipper_ui;
use flipperzero_rt::{entry, manifest};

// Define the FAP Manifest for this application
manifest!(
	name = "Flipper Zero Rust",
	app_version = 1,
	has_icon = false,
);

// Define the entry function
entry!(main);

// Getting UI data && events
flipper_ui! {
	App,
	"src/main.json",
	none => none,
	next => next,
	back => back,
	close => close,
}

// Entry point
fn main(_args: Option<&CStr>) -> i32 {
	let mut app = App::create();

	app.show();

	0
}