This project is a Svelte implementation of a drag-and-drop editable dashboard layout. It's inspired by and based on the NextJS implementation by olliethedev.
This dashboard allows users to rearrange different components of the interface by dragging and dropping them. It's built using Svelte and leverages the following technologies:
- Svelte
- SvelteKit
- Swapy for drag-and-drop functionality
- shadcn-svelte for UI components
- Drag-and-drop interface for rearranging dashboard components
- Responsive design
- Customizable layout sections
- Edit mode toggle for enabling/disabling drag-and-drop
- Persistent layout saving using local storage
-
Clone the repository:
git clone https://github.com/your-username/svelte-editable-layout-dashboard.git
-
Navigate to the project directory:
cd svelte-editable-layout-dashboard
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and visit
http://localhost:5000
src/routes/+page.svelte
: Main dashboard pagesrc/lib/components/swap-layout.svelte
: SwapLayout component for drag-and-drop functionalitysrc/lib/components/edit-switch.svelte
: Toggle switch for edit modesrc/lib/components/ui/
: UI components from shadcn-svelte
You can customize the dashboard by modifying the sections in src/routes/+page.svelte
. Each section is defined as a Svelte component and can be easily replaced or modified.
This project is a Svelte adaptation of the dnd-dashboard by olliethedev. The original implementation was built using NextJS, and this project aims to bring similar functionality to the Svelte ecosystem.
Contributions are welcome! Please feel free to submit a Pull Request.