Features

• smooth pan & zoom
• full mobile support
• lightweight
• highly customizable

Roadmap

• Documentation
• Board borders
• Code split & cleanup

Install

npm i svelte-infinite-board

Example

<script>
    import { Board } from 'svelte-infinite-board';
</script>

<section style="width: 100vw; height: 100dvh">
    <Board
        scaleBounds={{min: 0.5, max: 2}}
        bgScopes={[
        {
            scale: 1,
            size: 128,
            bg: `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_28_64)"><rect width="32" height="32" fill="black"/><rect width="16" height="16" rx="3" fill="#121212"/><rect x="16" y="16" width="16" height="16" rx="3" fill="#121212"/></g><defs><clipPath id="clip0_28_64"><rect width="32" height="32" fill="white"/></clipPath></defs></svg>`
        }
    ]}
    >
    </Board>
</section>