DrawBox - Kotlin Multiplatform Drawing SDK¶

Overview¶

DrawBox is a lightweight drawing SDK built with Kotlin Multiplatform (KMP) and Jetpack Compose. It enables developers to embed editable drawing, annotation, diagramming, and export capabilities into Compose Multiplatform applications across Android, iOS, Desktop (JVM), and Web (WebAssembly) from a single, shared codebase.

Featured in Android Weekly, Android Arsenal, Kotlin Weekly, and Google Dev Library.

Key Capabilities¶

Drawing Modes¶

• 🖊️ Freehand Drawing (Pen) - Create smooth, continuous paths
• ⬜ Rectangle - Draw precise rectangular shapes
• ⭕ Circle - Create perfect circles and ellipses
• 🔺 Triangle - Draw triangular shapes
• ➜ Arrow - Create arrows with intelligent head sizing
• ➖ Line - Draw straight lines

Customization & Control¶

• 🎨 Color Control - Set stroke color and background color
• 📏 Stroke Width - Adjustable line thickness from 1px to any size
• 👁️ Opacity Control - Alpha transparency from 0.0 to 1.0
• ↩️ Full Undo/Redo - Unlimited history tracking
• 🔄 Reset Canvas - Clear all drawings instantly

Export & Integration¶

• 📄 SVG Export - Export drawings as scalable vector graphics
• 🖼️ PNG Export - Raster image export with bitmap support
• 📦 JSON Serialization - Save/load drawing state for persistence
• 🔌 Embeddable SDK API - Simple Compose API with minimal setup

Why DrawBox?¶

Cross-Platform with Shared Code¶

Build once, deploy everywhere. Write your drawing logic once in Kotlin and run it natively on Android, iOS, Web, and Desktop.

Modern Architecture¶

Uses the MVI (Model-View-Intent) pattern with immutable state management, making your code predictable, testable, and maintainable.

Production-Ready SDK¶

• Published on Maven Central
• Actively maintained and battle-tested
• Comprehensive documentation and examples
• Used in production applications

Quick Statistics¶

Technology Stack¶

Kotlin Multiplatform
├── Android (Native)
├── iOS (Native)
├── JVM (Desktop)
└── WebAssembly (Web)

UI Framework: Jetpack Compose Multiplatform
Build System: Gradle (KTS)
State: MVI Pattern with sealed classes

Getting Started¶

Installation (2 minutes)¶

Add to your build.gradle.kts:

dependencies {
    implementation("io.ak1:drawbox:2.0.0-alpha02")
}

Basic Usage (5 minutes)¶

@Composable
fun DrawingScreen() {
    val controller = rememberDrawBoxController()
    val state by controller.state.collectAsState()

    Column(Modifier.fillMaxSize()) {
        // Drawing canvas
        DrawBox(
            state = state,
            onIntent = controller::onIntent,
            modifier = Modifier
                .fillMaxSize()
                .weight(1f)
        )

        // Control panel
        ControlsBar(
            viewModel = controller,
            canUndo = /* ... */,
            canRedo = /* ... */,
            onModeSelected = { mode -> controller.setMode(mode) }
        )
    }
}

Features Comparison¶

Documentation Structure¶

• Installation - Setup DrawBox in your project
• Quick Start - Create your first drawing in 5 minutes
• Core Concepts - Understand MVI, State, Intent, and Events
• API Reference - Complete API documentation
• Examples - Real-world usage examples
• Export Guide - SVG and PNG export options
• Contributing - Help improve DrawBox

Community & Support¶

• 🐙 GitHub Issues - Report bugs and request features
• 💬 GitHub Discussions - Connect with other developers
• 📧 Email - Direct support and inquiries
• ☕ Support Author - Buy the creator a coffee

License¶

DrawBox is licensed under the Apache License 2.0. See LICENSE for details.

Next Steps¶

1. Install DrawBox in your project
2. Create your first drawing with our quick start guide
3. Explore the API to unlock all capabilities
4. Join the community and contribute improvements

Ready to embed drawing capabilities in your Compose Multiplatform project? Let's get started.