MonacoEditorTreeViewSvelte

MonacoEditorTreeViewSvelte is a Svelte 5 component library for building file and folder explorers that feel close to the VS Code sidebar. It is designed for editor-like products, internal developer tools, sandboxes, and any app that needs a familiar project tree instead of a generic nested list.

Motivation

Most tree components stop at rendering nested data. Real file explorers need stronger behavior: folders before files, inline creation and rename flows, drag and drop, selection state, project-level grouping, context-aware actions, and icon handling that feels consistent with modern editor tooling.

This project exists to package that experience into a reusable Svelte library. The goal is simple: make it practical to embed a VS Code-inspired explorer in Svelte apps without rebuilding the interaction model from scratch each time.

What It Includes

• Multi-project tree rendering with project, folder, and file nodes.
• Inline creation for projects, files, and folders.
• Inline rename flows for all entry types.
• Drag-and-drop relocation for files and folders.
• Right-click context menus with overridable menu renderers.
• File selection state and folder open state helpers.
• Icon resolution for files and folders based on extension heuristics.
• Desktop and mobile display variants.
• A SvelteKit showcase app under src/routes for local previews.

Install

npm install @ravenlens/monaco-tree-view-svelte

Peer dependency:

npm install svelte

You can also use yarn add or pnpm add if that matches your workspace.

Quick Start

<script lang="ts">
	import { MonacoTree, type TreeProps, TreeTypes } from "@ravenlens/monaco-tree-view-svelte";

	const projects: TreeTypes.Project[] = [
		{
			id: "project-1",
			name: "project-1",
			entries: [
				{
					id: "src",
					type: "folder",
					name: "src",
					subentries: [
						{ id: "app", type: "file", name: "App.svelte" },
						{ id: "types", type: "file", name: "types.ts" }
					]
				},
				{ id: "readme", type: "file", name: "README.md" }
			]
		}
	];

	const onToggleEntry: TreeProps["onToggleEntry"] = (entry) => {
		console.log("toggle entry", entry);
	};

	const onToggleProject: TreeProps["onToggleProject"] = (project) => {
		console.log("toggle project", project);
	};
</script>

<MonacoTree
	treeName="Workspace"
	version="desktop"
	showIcons={true}
	projects={projects}
	{onToggleEntry}
	{onToggleProject}
/
>

Data Model

The tree is powered by three core types:

• Project: a top-level workspace container with entries.
• Folder: a recursive container with subentries.
• File: a leaf node.

The public types are re-exported via TreeTypes, which makes it straightforward to keep your application state aligned with the component contract.

Public API

The package exports the following main entry points:

• MonacoTree: the main tree view component.
• MonacoContextMenu: the default context menu surface.
• MonacoEntry: the recursive entry renderer.
• MonacoIcon: the icon resolver for files and folders.
• TreeTypes: exported file, folder, and project types.
• startCreateProject and isProjectCreating: helpers for externally-triggered project creation.
• openProjectIds, openFolderIds, openFileIds, and creationInitialziedProject: writable stores used by the explorer state model.

Local Development

Install dependencies:

yarn

Run the showcase app:

yarn dev

Open Storybook:

yarn storybook

Run quality checks:

yarn check
yarn test
yarn lint:package

Build the library package:

yarn prepack

Create a tarball locally:

npm pack

Publishing To npm

This package is prepared as a Svelte library using @sveltejs/package. The publish flow is:

yarn prepack
yarn lint:package
npm publish --access public

Publishing a scoped package requires the scope owner or organization to exist on npm and your account to have publish access. If npm publish returns a 404 for @ravenlens/monaco-tree-view-svelte, publish under a scope you own or claim the ravenlens scope first.

The published package is built from src/lib into dist, while src/routes remains the local demo and preview surface.

Contributing

Community contributions are welcome. Small bug fixes, behavior refinements, accessibility improvements, new icon mappings, documentation improvements, and showcase examples are all useful contributions.

If you want to contribute:

1. Fork the repository.
2. Create a focused branch for your change.
3. Install dependencies with yarn.
4. Run the preview app or Storybook to validate the interaction you are changing.
5. Run yarn check, yarn test, and yarn lint:package before opening a pull request.
6. Open a pull request with a clear summary, rationale, and screenshots or a short recording for UI changes.

For larger changes, open an issue or discussion first so the behavior and scope can be agreed before implementation.

Contributors

Maintainer:

• Michał Szczepański (kotekpsotek)

How to become a contributor:

• Submit a bug fix, feature improvement, documentation update, or test improvement through a pull request.
• Help review issues, refine requirements, or improve the example routes and Storybook stories.
• Stay aligned with the project direction: keep the explorer VS Code-inspired, practical, and reusable for the wider Svelte community.

Once your contribution is accepted and merged, you are part of the contributor history of the project.

Repository Structure

• src/lib: publishable library source.
• src/routes: local showcase pages for the tree and icon previews.
• stories: Storybook examples.
• icons: source icon assets used to generate file and folder visuals.
• scripts: build support scripts, including icon copying.

Status

The project is open source and ready for community iteration. The core interaction model is already in place, and the next level of quality comes from real-world usage, tighter polish, and contributor feedback.