A single-file, browser-based tool for writing professional assembly procedures (SOPs) and running them on the shop floor. Built for hardware teams that need step-by-step work instructions with images, torque and bonding specs, PPE, QC checkpoints, digital sign-offs, a live bill of materials, and a formal PDF output.
Everything is one HTML file. No install, no server, no account. Your data never leaves your computer.
- Download
sop_builder.html. - Open it in Chrome or Edge (double-click the file). Open it directly in a browser tab, not inside a preview pane, so saving and exports work.
- Build your procedure, then click Save Project. Your whole project, including images, is written to a single
.jsonfile. That file is your document; keep it with your program records. - To continue later, open the tool again and click Import Project.
The project .json never opens by itself. Always open sop_builder.html first, then import.
- Sections and steps with automatic numbering (1.1, 1.2, 2.1, ...)
- One field per instruction line, numbered automatically. Enter adds a line, Backspace on an empty line removes it, Alt+Up/Down or drag reorders
- Per step: parts and fasteners, tools and consumables, torque / adhesive / process specs, PPE chips, color-coded warnings (WARNING, CAUTION, NOTE, ESD), estimated duration, parallel activity notes
- Drag steps up and down in the sidebar, including across sections
- Right-click a step or section to duplicate or delete it
- Undo and redo across everything with Ctrl+Z / Ctrl+Y
- Resizable sidebar
- CAD reference and as-built photo slots per step, plus unlimited additional images and QC images, all with captions
- Paste from clipboard (Ctrl+V), drag and drop, or upload; multiple files at once
- iPhone HEIC photos convert automatically (needs internet once to load the converter; offline, set the iPhone camera to Most Compatible)
- Images are compressed on the way in, and an Optimize Images button re-compresses an existing project to shrink the file
- QC checkpoint per step with acceptance criteria, PASS / FAIL result, remarks, and evidence images
- Execution record per step: operator and verifier, start / end timestamps, digital signatures
- Cover-page approvals (prepared / reviewed / approved) with digital signature and date
- Revision history table
- Live BOM aggregated from every step, grouped into fasteners, parts, consumables, tools
- Editable in place: change a name, part number, or purchase link once and it propagates to every step that uses the item
- Mark a previously built assembly as an Input in later steps so it is listed for the operator but never double counted in the BOM
- PDF: a formal document with cover page, approvals, revision history, scope, table of contents, numbered steps with figures, sign-off summary, and a consolidated BOM appendix. Pages get running headers (your logo, document number, revision) and footers (title, footer text, Page X of Y)
- Excel: a multi-sheet workbook (Document, Steps with embedded images, Parts, Tools, Specs, BOM, Extra Images). The same workbook can be imported back
- Project JSON: the master save file. A text-only variant (no images) is available for sharing or review; importing a text-only file back into an open project keeps the project's images
The tool ships completely generic. Logo, company name, page footer text, and the confidentiality statement all live in your project file, set from the Branding card in Document Info. The tool itself contains no company data.
The tool is fully self-contained except for two optional libraries fetched from public CDNs at the moment you use them:
| Feature | Library | If offline |
|---|---|---|
| Excel export / import | ExcelJS | Not available until online once per session |
| Paginated PDF with headers and page numbers | Paged.js | Falls back to a simple continuous print layout |
| HEIC photo conversion | heic2any | Use JPEG photos instead |
Everything else (authoring, images, JSON save / load, BOM, sign-offs) works with no network at all.
There is no backend. Projects are plain JSON files on your disk. Nothing is uploaded anywhere by the tool.
Because browsers cannot silently write to disk, remember to click Save Project regularly. The tool warns before the tab closes.
Developed and tested on Chromium browsers (Chrome, Edge). The native save dialog uses the File System Access API where available and falls back to a normal download elsewhere.
The entire application is one hand-written HTML file with vanilla JavaScript and CSS, organized into commented sections (state, sidebar, step editor, BOM, save / load, Excel, print). Open sop_builder.html, edit, refresh. Issues and pull requests are welcome.
MIT. See LICENSE.