Chips and Code

Wondering how computers work? Find out by embarking on the journey of building your own computer from scratch, from chips to code. No prerequisites and for free from the browser.
Visit »

Features

Currently contains and fully supports the first week of Nand2Tetris. Can work offline and supports installation as a PWA. No cloud dependency for the basic functionality.

• Hardware IDE
  • Code editor with syntax highlighting
  • Test Scripts with automated evaluation
  • Visual diff of Expected & Actual output
  • Pin inspection with automated evaluation
  • Proper lexer&parser with inline syntax errors.
• Learning Content
  • Easily editable as Markdown files
  • Math support - KaTeX
  • Support for embedded Hardware IDE & YouTube videos
  • Responsive

Planned

The overall goal is to implement all functionality needed for the first six weeks of Nand2Tetris and adapt their learning material in a simplified form. That being said, it should be done with a quality-over-quantity mindset so that it's not just a simple rewrite. Everything should be thought through, and any major usability improvements have a higher priority than content.

Major features, ordered by priority:

1. Create a chip schema diagram on the fly (#12).
2. Proper tab interface - configurable tabs, everything in the same style (#13).
3. Decimal and hexadecimal format (#14).
4. Autocomplete & interface on hover (#20).
5. Ability to sign in (#21).
6. Projects (#22).
7. 2nd week of Nand2Tetris content (#15).
8. Support for CLOCKED (#16).
9. Debug mode (stepping, "animation") accessible from the Tests tab (#17).
10. 3nd week of Nand2Tetris content (#18).
11. Hack Machine Language.
12. Hack Assembly.
13. Assembler.
14. CPU Emulator.
15. 4th week of Nand2Tetris content.
16. 5th week of Nand2Tetris content.
17. 6th week of Nand2Tetris content.

Developing

Use Node.js 26 (nvm use) and install the locked dependencies:

npm ci
npm run dev

The app uses Svelte 5, SvelteKit 3, Vite 8, and TypeScript 6 (the current version supported by SvelteKit and svelte-check). The editor uses Monaco 0.57. UI menus and tabs use Bits UI. Tailwind 3 and daisyUI 3 retain the existing presentation during this infrastructure migration; redesigning the styling system is a separate step.

Lessons, built-in examples, the simulator, local drafts and ZIP downloads work without a database. Saved experiments use the same-origin SvelteKit /api/experiments routes and require DATABASE_URL from a Neon Postgres database. Copy .env.template to .env.local and set the URL locally when working on persistence. Never commit credentials or migration exports.

Building and testing

npm run check
npm run test:unit
npm run build
npm run preview -- --host 127.0.0.1
npm run test:cy

The production build generates .vercel/output using @sveltejs/adapter-vercel; it does not need database credentials. Lessons and the new-experiment page are prerendered. Shared experiment pages load on the client, and the API runs on Node.js 26 functions. The PWA precaches application assets and lessons; private API responses are never cached.

Unit tests live next to the source and include parser fixtures, simulator behavior, ownership checks, origin checks and migration validation. Cypress retains the existing accessibility and visual-regression checks. CI uses Node.js 26 and npm ci and runs typing, coverage, builds and Cypress on pull requests.

Deployment and data migration

See the Vercel migration runbook for project settings, database setup, preserving legacy experiment IDs and anonymous sessions, validation, domain cutover and rollback. Import and test the migration branch before merging it or changing production DNS.

Browser Support

Chips and Code is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of Internet Explorer.

Background

For more information check out:

• chipsandcode.com/about
• thesis.chipsandcode.com

License

Software: MIT License

Learning Content: CC BY-NC-SA 3.0