Skip to content
Sliced AreasBlender-like Layout System for professional,
Build Blender-grade workspaces on the web
Sliced Areas manages full-bleed, multi-panel layouts inspired by Blender, Resolve, and other professional tools. It handles the layout logic so you can focus on content.
You supply a resolver that renders each area. The library takes care of docking, splitting, joining, swapping, replacing, resizing, and maximize/restore.
Try the live layout below. Drag splitters, then drag any corner to dock areas.
Quick Start
Web Component
bash
npm install sliced-areasjs
import 'sliced-areas'
import 'sliced-areas/styles.css'
const el = document.querySelector('sliced-areas')
el.layout = {
areas: [
{ tag: 'editor', rect: { left: 0, right: 0.5, top: 1, bottom: 0 } },
{ tag: 'preview', rect: { left: 0.5, right: 1, top: 1, bottom: 0 } },
],
}
el.setResolver((tag) => {
const div = document.createElement('div')
div.textContent = tag
return div
})Vue 3
bash
npm install sliced-areasvue
<script setup>
import { ref } from 'vue'
import { SlicedAreas } from 'sliced-areas/vue'
import 'sliced-areas/styles.css'
const layout = ref({
areas: [
{ tag: 'editor', rect: { left: 0, right: 0.5, top: 1, bottom: 0 } },
{ tag: 'preview', rect: { left: 0.5, right: 1, top: 1, bottom: 0 } },
],
})
const resolveArea = (tag, areaId) => {
const div = document.createElement('div')
div.textContent = tag
return {
element: div,
cleanup: () => console.log(`Cleanup ${areaId}`)
}
}
</script>
<template>
<SlicedAreas :layout="layout" :resolver="resolveArea" />
</template>Release Notes
Catch up on updates in the Changelog.
License
MIT © Pavel Voronin
Credits
Favicon icon by Iconoir, MIT License.