Runnable example
Create a visual plan with custom HTML and Hostplan components
Compose a responsive plan from Hostplan cards, stats, lists, callouts, and layout primitives while keeping scripts and network resources out.
Scenario
A release or architecture plan needs a denser visual hierarchy than Markdown can express, but it must remain portable, reviewable, and safely sandboxed.
Workflow
- 1
Start in the intended repository
Project and branch context come from Git, so check the working directory before adding plans.
- 2
Run the commands in order
Keep the returned plan ids; placeholder ids below stand for the ids printed by your own store.
- 3
Inspect each transition
Use JSON output for automation and the browser viewer when a human needs to review the artifact.
- 4
Verify the outcome
Validation reports no errors, the stored plan renders the shared component layer in a sandboxed frame, and the original HTML source remains available unchanged.
hsp guide custom-html
hsp validate examples/custom-plan.html
hsp add examples/custom-plan.html --localWhat this example proves
Validation reports no errors, the stored plan renders the shared component layer in a sandboxed frame, and the original HTML source remains available unchanged.
The example uses no customer data and does not require a hosted account. Add--local when you want to guarantee that a sample remains only on the current machine.