Building a Cross‑Platform Desktop Code Sketch Application with Electron and React

This article describes the creation of Code Sketch, a cross‑platform desktop application for demonstrating code snippets during internal training sessions.

The author outlines requirements: offline usability, adjustable font size, a clean UI, and the ability to export HTML files.

Design decisions favor a minimal two‑panel layout (code editor on the left, preview on the right) with native‑like feel, disabling cursor changes and user selection to avoid a web‑ish sensation.

Technical choices include Electron for the desktop container, React for the render process, Parcel as the build tool, and Sass via dart‑sass in the main process; Babel is used in the render process via a script tag.

The logging console is implemented as a DOM‑based tree view that can display any JavaScript value, with type‑based coloring, collapsible objects, array length markers, and error display.

A command palette inspired by Sublime Text lets users insert third‑party libraries from BootCDN via a three‑step selection (library‑version‑resource) with optional quick‑insert shortcuts for popular frameworks.

Build configuration uses electron‑builder; a sample package.json build section is shown:

{ "build": { "productName": "Code Sketch", "extends": null, "directories": { "output": "release" }, "files": [ "icon.icns", "main.js", "src/*.js", "所有需要的文件", "package.json", "node_modules/@babel", "node_modules/sass" ], "mac": { "icon": "icon.icns", "category": "public.app-category.productivity", "target": [ "dmg" ] } } }

Development workflow involves two npm scripts: one starts a Parcel dev server for the render process, and another launches Electron with ELECTRON_START_URL pointing to that server.

The article concludes with notes on theming via CSS variables, distributing the app through GitHub Pages, adding Google Analytics, and a brief list of libraries and tools used.