Taking the code

Flutter (Dart), widget by widget

Right-click a widget and choose copy code. A window opens with its live preview and its code in Flutter (Dart), to copy or download. A checkbox adds a main() so you can try it in DartPad. This is the code of a button, just as Draft writes it:

// Copied from Draft — "Docs".
// Paste it into your Flutter project and use it like any widget:
//   const ContinueButton()

import 'package:flutter/material.dart';

class ContinueButton extends StatelessWidget {
  const ContinueButton({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 120,
      height: 40,
      child: ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xFF3D5AFE),
          foregroundColor: const Color(0xFFFFFFFF),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        ),
        child: const Text('Button'),
      ),
    );
  }
}

React with TypeScript and Tailwind

For many widgets the window also gives React with TypeScript and Tailwind: buttons, texts, charts, icons, images, text fields, checkboxes, switches, sliders, chips, badges, avatars, progress bars and the containers with what they hold. The styles use exact Tailwind values, never rounded. The same button:

// Copied from Draft — "Docs".
// use it like any component: <ContinueButton />
// Assumes your project already has Tailwind CSS configured (tailwind.config, the directives in your global CSS).

export default function ContinueButton() {
  return (
    <button className="w-[120px] h-[40px] rounded-[8px] bg-[#3d5afe] px-4 py-2 font-medium text-[#ffffff]" onClick={() => {}}>
      Button
    </button>
  );
}

A whole page to Dart

Export the whole page as a .dart file with a ready-to-use Flutter class, formatted like dart format, with logos as SVG and photos included (up to 300 KB).

A description for an AI

A text that describes your page, ready to hand to an AI assistant so it reproduces it.

Content assistant

It writes the sample texts for you, with your own OpenAI, Anthropic or Google key. The key stays encrypted on your computer.

Project files

Save and open whole projects as .draft files, with their photos, to move them to another computer or keep a copy.

Draft does not write the logic of your app: the data, accounts and real navigation are yours to write.