Live specimen / native HTML
drawably JavaScript Library Demos
Download Back To CSSScript.Com
Hand-drawn chrome for controls that still behave like the web.
01 / button states
One button. Four moods.
Press the action, pick a state, or redraw the same surface with a new seed.
Primary action
Live
state
idle
mounted / seed 42
Hover a sketched control to give it a fresh line.
Button variants3 forms
same native buttonoutline / solid / scribble
Action tonesintent
toneneutral / danger
Optional pen typefont
A line can become a letter.
02 / native fields
Every field stays native.
Tab through the controls, change values, and submit the form.
Small formkeyboard ready
Sketch inventoryattached
native
react
zero deps
A small set of marks goes a long way.
Controls, labels, lists, and surfaces share one loose line.
check markers
- real input element
- focusable by keyboard
- screen-reader friendly
dash markers
- seeded randomness
- boiling SVG frames
- clean teardown
03 / annotations
Mark the page by hand.
Underline, highlight, circle, and point without changing the text flow.
Keep the rough edge, add a quiet wash, or loop a loose circle around a thought.
watch the line
hover underlines
inline decorations
resize-aware arrow
04 / rough primitives
Build the line yourself.
Tune the seed, roughness, and boil. The same renderer draws every specimen below.