Profile image

A browser based logic simulator

This is the home and blog place for the logic simulator that is used by the 8 bit computer here on Content Nation.

Since it has been rewritten in Type Script and a lot of tiny bugs have been fixed it will be given a proper home and release.

You can download it from our git repo at .

The inner workings will get longer explanations but here is a extremely short overview:


on linux, don't know other platforms, but should work similar.

  • Check out the git repo.
  • Change to the new directory logicsimulator
  • run npm install to install the dependencies
  • run npx grunt release to build the code
  • the htdocs directory now contains the simulation Javascripts and CSS files

To copy/paste it:

git clone
cd logicsimulator
npm install
npx grunt release


You can install plugins (more components) by checking them out via git into the plugins directory.

Running npx grunt release should build them as well.


The base development is done via Typescript, the base components are in the ts directory. Components (things to simulate) are in the components directory.
Components come with up to 3 files: a .ts file for the code, an optional .svg file for the graphics and an optional .less file for extra CSS.

SVG and CSS can be shared by multiple components, the component must takes care of loading them.

Components are extensions of the BaseComponent class, the component must create interfacing pins and implement whatever logic they want.
The simplest components are static powers sources like power.ts.


Create a html file:

<!DOCTYPE html>
<script type="text/javascript" src="simulator.min.js"></script>
<link rel="stylesheet" href="css/default.css" type="text/css" />
<div id="logic1" class="logicsimulator"></div>
<script type="text/javascript">
var s1 = new Simulator("logic1", 300, 420);

This includes the right simulator js file, creates a div with an id and the right class.
The Script then creates it simulator by calling new Simulator("id from html", width, height).
You can set an base path for components, here "". components/ is automatically added by the simulator.
And finally you load a json file with the simulator content. How this file works is described in a dedicated blog post.