A very simple webtoy to visualize pipeline hazards https://peace.uber.space/hazardtoy
Go to file
2021-06-30 23:09:18 +02:00
src Added forward priority preset 2021-06-29 14:23:21 +02:00
.gitignore Initial commit 2021-06-29 03:07:59 +02:00
.htmlnanorc.js Prepared for building 2021-06-29 03:25:22 +02:00
package-lock.json Prepared for building 2021-06-29 03:25:22 +02:00
package.json Changed public url to be relative 2021-06-30 23:09:18 +02:00
postcss.config.js Initial commit 2021-06-29 03:07:59 +02:00
README.md Added readme 2021-06-29 03:37:33 +02:00
tailwind.config.js Prepared for building 2021-06-29 03:25:22 +02:00


Hazardtoy is a small webtoy meant to demonstrate how pipeline hazards work.

It shows data-hazards like read-after write as well as branch hazards.

Allowed Instructions

To keep the code to a minimum because i am lazy, the "cpu" only supports four different instructions:

  • nop does nothing
  • j <address> jumps unconditionally to an absolute address
  • addi <destination> <source> <immediate> adds an immediate value (a number) to register <source> and stores the result in <destination>
  • add <destination> <source1> <source2> like addi but adding two registers


The cpu supports 6 registers which are normal javascript numbers.


Hazardtoy is based on Parcel, tailwindcss, and Alpine.js

To start a development server, run:

npm install
npm start

To build for production:

npm ci
npm run build