Sticky note board
Lay a multi-line list out as a sticky-note board: three themes (cork, dark, workshop), automatic rows and columns, and deterministic position, rotation and tone data ready to render.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Note layout
JSON coordinates, ready to render.
Enter note text to lay out the board
Notes: 0 · Empty notes: 0 · Board width: 0 · Board height: 0
What this tool does
- Turn a week of tasks into a sticky-note board and screenshot it as a shareable kanban instead of a long list.
- Capture brainstorming: one idea per line and get a tilted, colour-toned note layout straight away.
- Lay out a retro or mood board here first, then feed the coordinates into a canvas or SVG renderer.
- Try the other themes: cork for a scrapbook feel, dark for night-time display, workshop for a technical look.
Example
Input
Write weekly report Buy milk Study Japanese Call mum
Output
{"theme":"cork","noteW":180,"boardW":1200,"boardH":900,"notes":[{"id":"note-1","text":"Write weekly report","x":21,"y":18,"w":180,"h":140,"rot":4.4,"tone":"#fdf3b3"},{"id":"note-2","text":"Buy milk","x":215,"y":23,"w":180,"h":140,"rot":-2.1,"tone":"#ffeaa7"},{"id":"note-3","text":"Study Japanese","x":406,"y":18,"w":180,"h":140,"rot":3.5,"tone":"#fff8d6"},{"id":"note-4","text":"Call mum","x":599,"y":18,"w":180,"h":140,"rot":2.1,"tone":"#f6e58d"}],"stats":{"notes":4,"empty":0,"width":1200,"height":900}}Positions and rotations come from a deterministic random source seeded by theme, size and text, so the same input always yields the same board.
Frequently asked questions
Are the note positions random?
They are deterministically pseudo-random. The seed is an FNV-1a hash of theme, note width, board size and all the text, fed into a mulberry32 generator, so identical input and options always produce identical coordinates — handy for screenshot comparison and tests.
Why do some notes overlap?
The layout computes columns per row as floor((board width − horizontal padding + gap) ÷ (note width + gap)) and jitters by at most one gap, so notes in the same row never overlap. If the board is too short, the last rows are clamped inside the canvas and may overlap vertically — increase the height or use fewer notes.
What do the themes change?
Each theme defines its own tone palette, padding, gap and default note height: cork uses warm yellows, dark uses deep browns, workshop uses pale grey-greens. Colours and spacing differ; the coordinate algorithm is identical.
How are empty lines handled?
An empty line still gets a note, displayed as （空） and counted separately in the stats, so blank rows in your text do not shift the notes that follow.
Is the board saved to a server?
No. All layout maths runs locally and the output is plain JSON you can keep in localStorage or a file yourself.
Keywords：便签墙sticky board软木板便签布局sticky notes灵感墙看板