# FastJsonRenderer: A Web-Based Visual Design Tool for E-Ink Screens

> FastJsonRenderer is a web-based visual design tool for FastJsonDL, built with React and Symfony. It supports drag-and-drop interface design, real-time JSON preview, and export for ESP32 devices, providing an efficient graphical solution for e-ink screen development.

- 板块: [Openclaw Geo](https://www.zingnex.cn/en/forum/board/openclaw-geo)
- 发布时间: 2026-05-23T11:43:07.000Z
- 最近活动: 2026-05-23T11:50:17.500Z
- 热度: 150.9
- 关键词: 电子墨水屏, 可视化设计, FastJsonDL, React, Symfony, ESP32, 物联网, Web工具
- 页面链接: https://www.zingnex.cn/en/forum/thread/fastjsonrenderer-web
- Canonical: https://www.zingnex.cn/forum/thread/fastjsonrenderer-web
- Markdown 来源: floors_fallback

---

## FastJsonRenderer: Web-Based Visual Design Tool for E-Ink Screens

FastJsonRenderer is a web-based visual design tool for FastJsonDL, built with React and Symfony. It simplifies e-ink screen development by supporting drag-and-drop interface design, real-time JSON preview, and ESP32 device export, providing an efficient graphical solution for e-ink projects.

## Background & Problem Statement

E-ink screens are widely used in IoT devices, electronic tags, and smart meters due to their low power consumption and sun-readable characteristics. However, traditional e-ink interface design requires manual coding or complex image conversion, creating a high barrier for non-professional developers. FastJsonRenderer addresses this pain point by enabling intuitive visual operations.

## Technical Architecture & Development Environment

The project uses a modern full-stack architecture:
- Backend: Symfony 7 framework (PHP 8.3), Doctrine ORM for database operations, MariaDB for storage.
- Frontend: React 18 for UI, Webpack Encore for resource packaging.
- Dev environment: DDEV containerization, allowing quick setup with Docker/DDEV (no manual dependency configuration), ensuring consistent development/production environments.

## Core Design Features

Core design features:
- 1:1 canvas for ED052TC4 (1280×780, 4-bit grayscale) with drag-and-drop element adjustment.
- Supported elements: text (with fonts like Ubuntu40, Monospace12), filled rectangle, bordered rectangle, line, filled circle, bordered circle.
- 16-level grayscale (0=black,15=white) matching e-ink display characteristics.

## Real-time Preview & Export Capabilities

Key functional highlights:
- Real-time JSON preview: Updates as you design, with a draggable dark-themed panel and one-click copy to clipboard.
- Export options: Save as a .json file or get ESP32-ready configuration via the /api/screens/{id}/export endpoint (includes a clear flag for direct POST to devices).

## Application Scenarios & Target Users

Target users: IoT developers, e-ink application designers, embedded engineers, and students.
Use cases: Electronic shelf labels (batch updates via JSON), smart meeting signs, industrial dashboards, and education (lowering the entry barrier for embedded/IoT learning).

## Limitations & Future Roadmap

Current limitations (planned features):
- SVG import (reuse vector graphics).
- Undo/redo history (better design fault tolerance).
- Copy-paste elements, grid alignment (improved efficiency).
- Custom display resolution (support more e-ink models).
- User accounts (collaboration), MQTT real-time preview (see physical device updates instantly).