PixelForge

Visual UI Builder and Code Generator for Embedded Displays

PixelForge is a browser-based visual editor for designing embedded display interfaces and exporting code for common Arduino and Python display workflows. It lets you build screens visually, manage multiple layouts, preview TFT and OLED-style UIs, reuse built-in templates, and generate starter code for several embedded targets from the same project data.

Features

• Visual drag-and-drop UI builder for embedded displays
• Multi-screen project workflow
• TFT and OLED-oriented preview modes
• Built-in UI examples/templates for fast prototyping
• Basic shapes, text, labels, buttons, cards, headers, progress bars, sliders, toggles, images, and icons
• Code generation for multiple embedded targets
• JSON project export/import for saving and reloading designs
• Light and dark theme support
• Embedded helper tools for image conversion and animation workflows

Supported Code Targets

• Arduino C++ / TFT_eSPI
• Arduino C++ / U8g2
• ESP32 Arduino using TFT_eSPI-style output
• PlatformIO Project export for ESP32 + Arduino + TFT_eSPI
• MicroPython with basic/experimental support
• CircuitPython with basic/experimental support

Notes:

• TFT_eSPI and U8g2 are the most complete generator targets.
• MicroPython and CircuitPython currently focus on basic shapes, text, and simple UI structures.
• Unsupported elements in the Python targets are emitted as safe comments instead of breaking output.

Built-in Templates / Examples

PixelForge currently includes ready-made examples such as:

• Simple Menu
• Dashboard
• Media Player
• Settings Panel
• Now Playing Card
• Two Cards
• Login
• Boot Screen
• Battery Monitor
• Weather Display
• IoT Device Status
• OLED Status
• OLED Menu
• OLED Now Playing
• OLED Sensors
• OLED Dialog
• OLED WiFi

Theme Support

• Light theme is the default on first launch.
• Dark theme is available from the built-in theme toggle.
• If a user has already selected a theme, that saved preference is reused.

Run Locally

PixelForge is a static web app. No build step is required.

Option 1:

• Open index.html directly in a browser.

Option 2:

• Serve the folder locally for the best compatibility with browser asset loading:

python -m http.server 8000

Then open:

http://localhost:8000/

Using a local server is recommended for image/icon workflows and embedded tool integration.

How To Use

1. Open PixelForge in your browser.
2. Set the display width, height, driver, and code target.
3. Add elements from the sidebar or insert a built-in template.
4. Select elements to edit position, size, text, colors, values, and driver-specific properties.
5. Switch between screens from the screen controls.
6. Review the generated code in the code panel.

Export Generated Code

• Use the code target dropdown to choose the output format.
• Use the Copy button to copy the generated code.
• When PlatformIO Project is selected, PixelForge can also generate a ZIP package containing:
  • platformio.ini
  • src/main.cpp
  • README.md

Save / Load Project JSON

PixelForge supports project save/load through JSON:

• Export JSON saves the current project state
• Import JSON restores a previously exported project

This includes screens, elements, display settings, code target, and other editor state used by the app.

Screenshots

Folder Structure

.
├── app.js
├── index.html
├── style.css
├── icons/
├── screenshots/
├── scripts/
└── tools/
    ├── bitcanvas-studio/
    ├── pixelforge/
    └── theme.css

Roadmap

• Improve MicroPython generator coverage
• Improve CircuitPython generator coverage
• Expand template library
• Add broader display driver presets
• Improve export packaging and code organization
• Continue polishing preview/code parity

Contributing

Issues, suggestions, and pull requests are welcome.

If you contribute:

• keep UI/editor behavior stable unless a change is clearly intentional
• avoid breaking existing TFT_eSPI and U8g2 output
• keep generated code paths safe for unsupported elements

License

This project is released under the MIT License. See LICENSE.

Credits

Created by Vinod Prabhashvara.