Circuit Sketcher - Web App

An application to draw circuits on a canvas. It is based on the code-forge-temple/circuit-sketcher-core.

⭐️ Love this project? Please consider starring the repository on GitHub and supporting development to help me continue building amazing features!

Table of Contents

• Features
• Development
  • Installation
  • Building
  • Linting
  • Preview
• Demo
• Component Library
• License

Features

• Draw and save circuit diagrams
• Load and save canvas and library data
• Save to Local Storage Library the customized circuit nodes
• Organize the component library in groups and subgroups, with the published components one Sync... away
• Rotate circuit nodes, zoom and pan the canvas
• Save the whole circuit as a PNG image
• Responsive design
• Interactive user interface

Development

Installation

1. Clone the repository:

   git clone https://github.com/code-forge-temple/circuit-sketcher-app.git
   cd circuit-sketcher-app

2. Set the Node.js version:

   • For Unix-based systems:

     nvm use

   • For Windows:

     nvm use $(cat .nvmrc)

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Building

To build the project for production, run:

npm run build

Linting

To lint the project, run:

npm run lint

Preview

To preview the production build, run:

npm run preview

Usage

1. Open the deployed version of the application here.
2. Start drawing your circuit on the canvas:
   • On the canvas, right-click to show the canvas menu, and select Create Node.
   • Right-click on the node to show the node menu, select Change Image, and choose an image relevant to your circuit node.
   • Right-click on the node to show the node menu, select Add Port..., and choose the port location and type.
   • You can rename the circuit node label or port label by double-clicking on the label. The port or port label can also be deleted (right-click on the port to show the port menu and proceed from there).
   • You can relocate ports, either to a different node side or rearrange the ports on the same side, by dragging and dropping the port to the desired location within the dotted blue area.
   • You can rotate a circuit node by right-clicking on it and selecting Rotate, then 90° Clockwise or 90° Counterclockwise. Its ports turn with it and its connections are routed again.
   • After you are satisfied with your changes to the circuit node, and if you wish to save the circuit node to reuse it in the current or a different .circuit-sketcher file, you can right-click on the circuit node and press Save Node to Library (the library is kept in your browser; the Library buttons in the toolbar save it to a file and load one).
   • You can reuse the node by right-clicking on the canvas and selecting Library..., then the desired node (nodes in a group are in that group's submenu).
   • To organize the library, right-click on the canvas and select Library... -> Manage Library.... There you can create groups and subgroups (New subgroup), drag nodes and groups into other groups, rename or delete them (deleting a group keeps its nodes: they move up a level), Import... a library or node file into any group, and Export... a node, a group or the whole library. The default group is read-only and only offers Sync... (see Component Library).
   • Connections between circuit nodes can be made by dragging and dropping one port to the destination port (if it is a compatible port). You can delete a connection by selecting it and then pressing the Delete key.
   • You can drag the entire circuit by holding the mouse scroll button and moving the mouse.
   • You can zoom with the mouse wheel (around the mouse pointer), or with the + and - buttons in the bottom-right corner of the canvas. The square button below them goes back to 100% and centers the circuit. The zoom is saved with the file.
   • To save the whole circuit as a picture, right-click on the canvas and select Save As Image. You get circuit.png: the entire circuit at 100% on a transparent background, whatever part of it is in view.

A short video tutorial on how to use the application (the video is showcasing the Obsidian plugin version of the Circuit Sketcher but the core functionality is the same):

Demo

You can view the deployed version of the application here.

Component Library

To help you get started with Circuit Sketcher, we provide a curated library of circuit components at circuit-sketcher-lib.

Quick Start with Pre-built Components

Sync the default library (quickest):

• Right click on canvas to show the menu, then Library... -> Manage Library... -> Sync... on the default group. It downloads the latest components from circuit-sketcher-lib into default; press Sync... again any time to pick up new ones.
• default is read-only: every sync replaces its content. To change one of its components, place it on the canvas, edit it and use Save Node to Library - your version is saved outside default.

Import the entire library:

• Download the complete component library: library.json
• Import it directly into Circuit Sketcher to get access to all available components (right click on canvas to show the menu, then Library... -> Manage Library... -> Import... on the Library row, or on any group to import into that group)

Import individual components:

• Browse individual components: assets/nodes
• Download specific .json files for the components you need
• Import them one by one into your Circuit Sketcher workspace (right click on canvas to show the menu, then Import Node)

License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for more details.

✨ My Other Projects

✦ Agentic Signal – Visual AI agent workflow automation platform with local LLM integration - build intelligent workflows using drag-and-drop interface, no cloud dependencies required.

✦ ScribePal - An Open Source intelligent browser extension that leverages AI to empower your web experience by providing contextual insights, efficient content summarization, and seamless interaction while you browse.

✦ Local LLM NPC An interactive educational game built for the Google Gemma 3n Impact Challenge.