@nine-slice-frame/svelte

Nine-slice scaling component for Svelte using CSS border-image.

What is Nine-Slice Scaling?

Nine-slice scaling divides an image into 9 sections, allowing it to scale to any size while preserving corner details and preventing distortion. Perfect for UI frames, borders, panels, and buttons that need to scale dynamically.

┌─────────┬───────────┬─────────┐
│ Corner  │ Top Edge  │ Corner  │
│ (Fixed) │ (Scale H) │ (Fixed) │
├─────────┼───────────┼─────────┤
│  Left   │  Center   │  Right  │
│  Edge   │ (Scale    │  Edge   │
│(Scale V)│  Both)    │(Scale V)│
├─────────┼───────────┼─────────┤
│ Corner  │ Bottom    │ Corner  │
│ (Fixed) │   Edge    │ (Fixed) │
└─────────┴───────────┴─────────┘

Why Nine-Slice Scaling?

The Problem: Traditional image scaling stretches the entire image uniformly, distorting corners, borders, and decorative elements. This makes UI elements look unprofessional and breaks visual consistency.

The Solution: Nine-slice scaling keeps corners and edges crisp while only stretching the middle sections. This means:

Single image, infinite sizes - One asset works for buttons, dialogs, and panels of any dimension
Pixel-perfect corners - Ornate borders and rounded corners stay sharp at any scale
Smaller file sizes - No need for multiple image variants for different sizes
Ideal for pixel art - Preserves the crisp aesthetic of retro-style UIs
CSS-native performance - Uses browser-native border-image, no canvas or WebGL overhead

Common Use Cases:

Game UI frames and dialog boxes
Decorative borders and panels
Scalable buttons with ornate edges
Retro/pixel art interfaces
Dynamic content containers

Why This Library?

Zero Dependencies - No runtime dependencies beyond Svelte. This package only requires Svelte as a peer dependency.

Incredibly Small - Minimal bundle impact: 1.18KB / 0.62KB gzipped

Native Performance - Uses browser-native CSS border-image property, not canvas rendering or heavy image manipulation libraries. Fast, efficient, and hardware-accelerated.

Framework-Agnostic API - Same simple, consistent API across all frameworks:

Installation

npm install @nine-slice-frame/svelte
# or
pnpm add @nine-slice-frame/svelte
# or
yarn add @nine-slice-frame/svelte

Usage

<script lang="ts">
  import { NineSliceFrame } from '@nine-slice-frame/svelte';
</script>

<NineSliceFrame
  imagePath="/ui/frame.png"
  slice={7}
  borderWidth={5}
  repeat="stretch"
  fill={true}
  pixelated={true}
>
  <p>Your content here</p>
</NineSliceFrame>

Props

Prop	Type	Default	Description
`imagePath`	`string`	required	Path to the image (relative to public folder)
`slice`	`number \| object`	`8`	Slice values - number for uniform, or `{ top, right, bottom, left }` for per-edge
`borderWidth`	`number`	`5`	Visual border width in pixels
`repeat`	`'stretch' \| 'repeat' \| 'round' \| 'space'`	`'stretch'`	Border repeat mode
`fill`	`boolean`	`true`	Use 'fill' to show center of image as background
`pixelated`	`boolean`	`true`	Use pixelated rendering for pixel art
`class`	`string`	`''`	Additional CSS class names
`style`	`string`	`''`	Additional inline styles

Advanced Usage

Different Slice Values Per Edge

<NineSliceFrame
  imagePath="/ui/fancy-frame.png"
  slice={{ top: 10, right: 8, bottom: 10, left: 8 }}
  borderWidth={6}
>
  Content with asymmetric border
</NineSliceFrame>

Custom Styling

<NineSliceFrame
  imagePath="/ui/frame.png"
  slice={8}
  borderWidth={10}
  class="my-custom-frame"
  style="padding: 20px; min-height: 200px;"
>
  Styled content
</NineSliceFrame>

JSPM