9S is a browser-based 9-slice authoring tool for turning a single frame image into reusable interface assets. It lets you define slice boundaries visually, preview scaling behavior, and export both image slices and CSS implementations for production use.
Interface frames often start as bespoke artwork and end up needing to behave like a flexible system. That handoff is usually slow and error-prone.
9S explores a faster bridge between visual asset creation and interface implementation. The core idea is simple: make the slicing, previewing, and export workflow direct, visual, and immediate.
- Drag slice handles directly on the canvas.
- Preview how frames scale at different dimensions before export.
- Export both
border-imageand CSS Grid approaches. - Package the full result as a ZIP with source art plus generated slices.
- Support drag-and-drop uploads and keyboard fine-tuning.
- Keep the entire workflow browser-based with no backend dependency.
- Load a PNG frame into the editor.
- Adjust horizontal and vertical insets to define the nine regions.
- Preview the frame at different sizes to validate edge and corner behavior.
- Generate CSS plus sliced PNG assets from the same source.
- Download the packaged output for use in game, app, or web interfaces.
| 200 x 200 | 800 x 600 |
|---|---|
 |
 |
- Node.js 18+
- npm
git clone https://github.com/newjordan/9S.git
cd 9S
npm install
npm run devOpen http://localhost:5173.
- Add preset export targets for game UI frameworks and design systems.
- Support batch slicing for frame libraries.
- Expand output formats for additional layout engines.
- Explore prompt-assisted generation of decorative frame variations.