📖 Documentation
Guide &
Troubleshooting
Everything you need to go from zero to a working circuit — plus answers to the most common problems.
01 — GETTING STARTED
Quick Start
Gateonix runs entirely in your browser. No install, no account required — just open login.html and either log in, register, or continue as Guest.
1
Open the app
Open login.html in any modern browser (Chrome, Firefox, Edge, Safari). Click "Continue as Guest" for instant access — no account needed.
2
The canvas loads with a Half Adder template
A working circuit is pre-loaded so you can see signals flowing immediately. Green wires = HIGH (1), red wires = LOW (0). Click an INPUT gate to toggle it.
💡 Click the green/red box labelled "A" or "B" to flip the input value
3
Drag a gate from the left panel
Every gate type lives in the left sidebar. Drag any chip onto the canvas to place it. It snaps to a 10px grid automatically.
4
Wire gates together
Hover over an output pin (right side of a gate) until the cursor turns into a crosshair, then click and drag to an input pin (left side). Release to complete the wire.
💡 Press Esc to cancel a wire in progress
5
Watch the simulation update live
Every change is simulated instantly. Signal colours flow from inputs to outputs in real time — no "run" button needed.
Use the built-in Templates in the left panel to load ready-made circuits: Half Adder, Full Adder, 2:1 MUX, 2-to-4 Decoder, Comparator, and more. Great starting points for learning.
02 — LAYOUT
Interface Tour
Gateonix — Application Layout
L
Left Panel — Gate Palette & Templates
Drag any gate onto the canvas. Sections: I/O (Input, Output, Clock, LED), Logic Gates (AND/OR/NOT…), Multi-Input (3 and 4-input), Flip-Flops, MSI Components, and Built-in Templates.
C
Canvas — The simulation workspace
Pan with Alt+drag or middle-click drag. Zoom with the scroll wheel. Gates snap to a 10px grid. The minimap in the bottom-right shows a full overview of your circuit.
R
Right Panel — Code, Validate & Truth Table
Three tabs: Code (live export in 6 languages), Validate (circuit checker), Truth Table (auto-generated for up to 6 inputs). Drag the left edge to resize.
W
Waveform Panel — Timing diagram
Click ⏱ Waveform in the topbar to show/hide. Drag the top edge to resize it. Records signal history as you interact with the circuit or run the clock.
03 — CORE WORKFLOW
Building Circuits
HIGH (1) — green wire
LOW (0) — red wire
Unconnected — grey pin
→
Placing gates
Drag from the left palette onto the canvas. You can also double-click a chip to place it at the centre. Every gate has small coloured circles on its edges — those are pins.
→
Connecting pins
Click an output pin (right side) to start a wire. Move to an input pin (left side) and click to complete it. Only one wire per input pin — rewiring auto-replaces the old connection.
→
Toggling inputs
Click an INPUT gate body to toggle it between 0 and 1. You can also click the toggle button in the Properties panel on the right.
→
Deleting gates and wires
Click a gate to select it (dashed teal outline), then press Delete or the ⌫ Delete button in the topbar. This removes the gate and all its connected wires.
→
Labelling gates
Select an INPUT or OUTPUT gate and type a label in the Properties panel. Labels appear on the gate and in exported code (e.g.
input wire a in Verilog).
If a gate is highlighted in pink with a ↻ badge, it is part of a combinational loop. This means output feeds back into input without a flip-flop acting as a memory element. The simulator will still run but results may be unstable. Use a flip-flop to intentionally store state.
04 — REFERENCE
Gate Reference
| Gate | Category | Inputs → Outputs | Behaviour |
|---|---|---|---|
| INPUT | I/O | 0 → 1 | Toggle manually. Drives constant 0 or 1. |
| CLOCK | I/O | 0 → 1 | Oscillates at 500ms when ▶ Clock is running. |
| OUTPUT | I/O | 1 → 0 | Displays the value of its connected wire. |
| LED | I/O | 1 → 0 | Circle indicator. Glows green when HIGH. |
| BUFFER | Basic | 1 → 1 | Passes input unchanged. Useful for fanout. |
| NOT | Basic | 1 → 1 | Inverts input. Output = ¬A. |
| AND | Basic | 2 → 1 | Output = 1 only when ALL inputs are 1. |
| OR | Basic | 2 → 1 | Output = 1 when ANY input is 1. |
| NAND | Basic | 2 → 1 | NOT AND. Output = 0 only when all inputs are 1. |
| NOR | Basic | 2 → 1 | NOT OR. Output = 1 only when all inputs are 0. |
| XOR | Basic | 2 → 1 | Output = 1 when inputs differ. |
| XNOR | Basic | 2 → 1 | Output = 1 when inputs are equal. |
| AND3 / AND4 | Multi | 3–4 → 1 | AND with 3 or 4 inputs. |
| OR3 / OR4 | Multi | 3–4 → 1 | OR with 3 or 4 inputs. |
| MUX 2:1 | MSI | A, B, Sel → Y | Sel=0 → Y=A, Sel=1 → Y=B. |
| MUX 4:1 | MSI | D0–D3, S0, S1 → Y | S1:S0 selects which data input passes through. |
| DEMUX 1:2 | MSI | In, Sel → Y0, Y1 | Routes input to selected output. |
| DEC 2:4 | MSI | A, B → Y0–Y3 | Exactly one output is HIGH based on AB value. |
| DEC 3:8 | MSI | A, B, C → Y0–Y7 | 8-output decoder. One HIGH per combination. |
| ENC 4:2 | MSI | D0–D3 → A0, A1 | Outputs binary index of highest active input. |
| PRIO 4:2 | MSI | D0–D3 → A0, A1, GS | Priority encoder. GS = 1 when any input is active. |
| HADD | MSI | A, B → Sum, Carry | 1-bit half adder. No carry-in. |
| FADD | MSI | A, B, Cin → Sum, Cout | 1-bit full adder. Chain for multi-bit addition. |
| COMP1 | MSI | A, B → >, =, < | 1-bit magnitude comparator. |
| BIN2HEX | MSI | B0–B3 → H0–H3 | Passes bits through and displays hex value on gate body. |
| SR_FF | FF | S, R → Q, Q̄ | Set-Reset. S=R=1 is invalid state. |
| D_FF | FF | D, CLK → Q, Q̄ | Latches D on rising edge of CLK. |
| JK_FF | FF | J, K, CLK → Q, Q̄ | J=K=1 toggles output on rising edge. |
| T_FF | FF | T, CLK → Q, Q̄ | T=1 toggles on rising edge, T=0 holds. |
05 — SEQUENTIAL LOGIC
Flip-Flops
Flip-flops are edge-triggered memory elements. They only change state on the rising edge of a clock signal (when CLK goes from 0 → 1). Connect a CLOCK gate to the CLK input and enable the ▶ Clock button.
D
D Flip-Flop — most common
Place a D_FF. Connect an INPUT to D and a CLOCK gate to CLK. Enable ▶ Clock. Every time CLK rises, Q captures the value of D. Connect Q to an OUTPUT to observe it. This is a 1-bit register.
T
T Flip-Flop — frequency divider
Connect T=1 (a HIGH INPUT) and wire a CLOCK to CLK. Q will toggle every rising edge — dividing clock frequency by 2. Chain three T flip-flops to build a 3-bit binary counter.
JK
JK Flip-Flop — most versatile
J=1 sets Q=1, K=1 resets Q=0, J=K=0 holds, J=K=1 toggles. This is a universal flip-flop — it can be configured to behave like SR, D, or T.
Flip-flop outputs (Q, Q̄) are not treated as combinational paths — the simulator won't flag them as loops. This means you can safely feed Q back into inputs without a pink warning badge.
06 — TIMING ANALYSIS
Waveform Viewer
Click ⏱ Waveform in the topbar to open the timing diagram panel. It records every signal change automatically.
⏺
Recording
Click ⏺ Rec to pause/resume recording. Clear the history with ⌫ Clear. Use the Zoom slider to expand or compress the time axis.
⬛
Step Mode
Enable ⬛ Step mode to manually advance one simulation tick at a time using the ▶ +1 button. Ideal for debugging sequential logic one clock edge at a time.
⊞
Bus Grouping
Select multiple signals (shift-click their labels) and click ⊞ Bus to group them into a single hexadecimal bus row. The bus displays its combined value as
0xN.⚡
Pattern Generator
Click ⚡ Pattern to open the pattern generator. Enter sequences like
0,1,0,1,1,0 for each input and set an interval in ms. The generator feeds inputs automatically, recording the full waveform.07 — CODE GENERATION
Code Export
The right panel's Code tab live-syncs with your circuit. Switch languages using the tabs at the top.
→
Label your inputs and outputs first
Select each INPUT and OUTPUT gate and give it a label (A, B, Cin, Sum, Carry…) in the Properties panel. Labels become port names in generated code. Unlabelled gates default to
in1, out1, etc.→
Copy the code
Click ⎘ Copy to copy the current language to your clipboard. The JSON tab also has an ▶ Apply button — paste edited JSON and click Apply to load it back into the canvas.
→
Export as image or PDF
Click 📤 Export in the topbar to export as PNG (2× resolution with embedded truth table), SVG vector, or PDF with metadata header.
The JSON format is the native save format — you can share circuit files with others by exporting JSON and having them import it with the Import JSON button.
08 — PERSISTENCE
Saving Circuits
1
Named saves (requires login)
Click 💾 Save Circuit. Enter a name and optional description. Saves are stored per-user in
localStorage so they persist between sessions on the same device.2
Loading saves
Click 📂 My Circuits. Each saved circuit shows its gate count, wire count, and save date. Click Load to open it — you'll be asked to confirm if the canvas has unsaved changes.
3
User templates
In the left panel, click + Save under "My Templates" to save the current circuit as a reusable template. These appear in your panel alongside built-in templates.
All data is stored in your browser's localStorage. Clearing browser data or using a private/incognito window will lose your saves. Use Export JSON to keep permanent backups.
09 — REFERENCE
Keyboard Shortcuts
Undo
Ctrl+Z
Redo
Ctrl+Y
Delete selected gate
Delete
Cancel wire
Esc
Apply JSON (code panel)
Ctrl+Enter
Pan canvas
Alt+Drag
Zoom in / out
Scroll wheel
Toggle input value
Click input gate
Start wire
Click output pin
Fit view
⊡ Fit button
10 — FAQ
Troubleshooting
BUGMy gate is glowing pink with a ↻ badge. What does that mean?
›
Your circuit has a combinational loop — a gate's output is connected back to its own input (directly or through other gates) without a flip-flop breaking the cycle. The simulator detects this using Kahn's topological sort algorithm and highlights the loop in pink.
Fix: If you intentionally want feedback (e.g. an SR latch), replace the gate loop with a proper SR_FF or D_FF flip-flop. If it's unintentional, trace the pink-highlighted gates and remove the backward connection.
Fix: If you intentionally want feedback (e.g. an SR latch), replace the gate loop with a proper SR_FF or D_FF flip-flop. If it's unintentional, trace the pink-highlighted gates and remove the backward connection.
BUGMy wires are all red even though I set inputs to HIGH.
›
This usually means the wires aren't actually connected. A common mistake is releasing a wire slightly off-target of the input pin.
Check: Hover over the pin — a crosshair cursor means it's a valid target. Try deleting the wire (select its destination gate and use Delete, then re-draw the connection). Also make sure you started the wire from an output pin (right side), not an input pin.
Check: Hover over the pin — a crosshair cursor means it's a valid target. Try deleting the wire (select its destination gate and use Delete, then re-draw the connection). Also make sure you started the wire from an output pin (right side), not an input pin.
BUGThe flip-flop Q output never changes when I toggle inputs.
›
Flip-flops are edge-triggered — they only sample input on the rising edge of the clock (when CLK goes 0 → 1).
Steps to fix:
1. Make sure you have a CLOCK gate (not an INPUT) connected to the CLK pin.
2. Click ▶ Clock in the topbar to start the clock oscillator.
3. Now toggle your inputs — Q will update on the next rising clock edge.
If you're not using the clock, manually click the CLOCK gate to toggle it 0→1→0, which creates one manual rising edge.
Steps to fix:
1. Make sure you have a CLOCK gate (not an INPUT) connected to the CLK pin.
2. Click ▶ Clock in the topbar to start the clock oscillator.
3. Now toggle your inputs — Q will update on the next rising clock edge.
If you're not using the clock, manually click the CLOCK gate to toggle it 0→1→0, which creates one manual rising edge.
HOWHow do I delete just a wire without deleting the gate?
›
You can't click wires directly to select them (wires are not independently selectable in the current version).
Workaround: Simply draw a new wire to the same input pin — it will automatically replace the existing connection. This is the fastest way to rewire a pin.
Alternatively, if you want to disconnect a pin entirely, you can delete the destination gate and re-place it (use Undo after if needed).
Workaround: Simply draw a new wire to the same input pin — it will automatically replace the existing connection. This is the fastest way to rewire a pin.
Alternatively, if you want to disconnect a pin entirely, you can delete the destination gate and re-place it (use Undo after if needed).
HOWHow do I connect one output to multiple inputs (fanout)?
›
Simply draw multiple wires from the same output pin. Click the output pin once to start the first wire, complete it, then click the same output pin again for the second wire. There is no limit on fanout — one output can drive as many inputs as you like.
If signal integrity is a concern in a real design, insert a BUFFER gate to represent the driver.
If signal integrity is a concern in a real design, insert a BUFFER gate to represent the driver.
HOWThe truth table isn't showing up in the right panel.
›
The circuit truth table requires:
• At least one INPUT gate (not CLOCK)
• At least one OUTPUT or LED gate
• No more than 6 INPUT gates (2⁶ = 64 rows; more would be too slow)
Switch to the Truth Table tab in the right panel and click ▶ Run to generate it. If you select a single gate on the canvas, the gate truth table (for that gate type only) appears at the bottom of the Properties panel.
• At least one INPUT gate (not CLOCK)
• At least one OUTPUT or LED gate
• No more than 6 INPUT gates (2⁶ = 64 rows; more would be too slow)
Switch to the Truth Table tab in the right panel and click ▶ Run to generate it. If you select a single gate on the canvas, the gate truth table (for that gate type only) appears at the bottom of the Properties panel.
DATAMy saved circuits disappeared after closing the browser.
›
Saves are stored in localStorage, which is tied to the exact browser + origin (file path or domain). Saves can be lost if:
• You used a private/incognito window
• You cleared browser data or site data
• You moved the files to a different folder (changing the origin)
• You opened the files in a different browser
Prevention: Always export important circuits with Export JSON as a backup file on your disk. You can re-import them at any time with Import JSON.
• You used a private/incognito window
• You cleared browser data or site data
• You moved the files to a different folder (changing the origin)
• You opened the files in a different browser
Prevention: Always export important circuits with Export JSON as a backup file on your disk. You can re-import them at any time with Import JSON.
DATAI registered an account but my login doesn't work.
›
Accounts are stored locally in localStorage — they're not cloud-based. This means your account only exists in the browser where you registered it.
Common causes:
• You're using a different browser than where you registered
• Browser data was cleared
• You typed the wrong password (passwords are stored as SHA-256 hashes, so there's no recovery)
Fix: Register a new account or use Continue as Guest. All circuit features work in guest mode.
Common causes:
• You're using a different browser than where you registered
• Browser data was cleared
• You typed the wrong password (passwords are stored as SHA-256 hashes, so there's no recovery)
Fix: Register a new account or use Continue as Guest. All circuit features work in guest mode.
PERFThe canvas feels slow with many gates.
›
The canvas redraws fully on every simulation tick. Performance degrades with very large circuits (50+ gates) because each frame redraws all gates, wires, and pins.
Tips to improve performance:
• Stop the clock when not needed (▶ Clock toggles it off)
• Close the Waveform panel when not in use
• Use MSI components (HADD, FADD, DEC2, MUX2) instead of building them from individual gates — one MSI component replaces many gates at a fraction of the render cost
• Use a Chromium-based browser (Chrome/Edge) for best Canvas 2D performance
Tips to improve performance:
• Stop the clock when not needed (▶ Clock toggles it off)
• Close the Waveform panel when not in use
• Use MSI components (HADD, FADD, DEC2, MUX2) instead of building them from individual gates — one MSI component replaces many gates at a fraction of the render cost
• Use a Chromium-based browser (Chrome/Edge) for best Canvas 2D performance
HOWHow do I export a clean image for my report or assignment?
›
Click 📤 Export in the topbar. You have three options:
• PNG — 2× resolution raster image with a dark background, dot grid, and the circuit truth table embedded in the bottom-right corner. Best for documents and slides.
• SVG — Scalable vector graphic. Open in Illustrator, Inkscape, or embed in HTML. Scales to any size without pixelation.
• PDF — Print-ready PDF with a header bar (circuit name + date) and a footer showing gate and wire counts. Uses jsPDF loaded from CDN — requires an internet connection on first use.
• PNG — 2× resolution raster image with a dark background, dot grid, and the circuit truth table embedded in the bottom-right corner. Best for documents and slides.
• SVG — Scalable vector graphic. Open in Illustrator, Inkscape, or embed in HTML. Scales to any size without pixelation.
• PDF — Print-ready PDF with a header bar (circuit name + date) and a footer showing gate and wire counts. Uses jsPDF loaded from CDN — requires an internet connection on first use.
BUGThe Validate tab shows errors on gates I know are correct.
›
The validator checks for specific rules like unconnected input pins, floating output gates (OUTPUT with nothing wired to it), and invalid flip-flop states. Some common false positives:
• Orange ⚠ badge — warning, not an error. The circuit still simulates. For example, an unconnected input pin defaults to 0, which may be intentional.
• Red ✖ badge — actual error that may prevent correct simulation. Check the Validate panel for details.
Gates with no connections are flagged because they produce no useful output. You can safely ignore warnings on gates you're still wiring up.
• Orange ⚠ badge — warning, not an error. The circuit still simulates. For example, an unconnected input pin defaults to 0, which may be intentional.
• Red ✖ badge — actual error that may prevent correct simulation. Check the Validate panel for details.
Gates with no connections are flagged because they produce no useful output. You can safely ignore warnings on gates you're still wiring up.
HOWCan I use Gateonix offline?
›
Yes — almost entirely. All core functionality works offline:
• Building, simulating, saving, loading circuits
• All code exports (JSON, Python, C, C++, Verilog, VHDL)
• PNG and SVG export
The only feature that needs internet:
• PDF export — loads jsPDF from a CDN on first use. After it's cached by the browser, subsequent PDF exports work offline.
• Google Fonts — JetBrains Mono and Syne load from Google Fonts. Without internet, the browser falls back to a system monospace/sans font. The app remains fully functional.
• Building, simulating, saving, loading circuits
• All code exports (JSON, Python, C, C++, Verilog, VHDL)
• PNG and SVG export
The only feature that needs internet:
• PDF export — loads jsPDF from a CDN on first use. After it's cached by the browser, subsequent PDF exports work offline.
• Google Fonts — JetBrains Mono and Syne load from Google Fonts. Without internet, the browser falls back to a system monospace/sans font. The app remains fully functional.
Still stuck? Try loading a built-in template to see a working example.
Open Simulator →