DEV Community: Michael Amachree

I Built Tech Invoice Forge: an Offline-First Invoice App for Tech Freelancers

Michael Amachree — Fri, 03 Apr 2026 13:03:59 +0000

Most invoicing tools follow the same pattern: create an account, connect to a cloud app, hand over your data, and pay monthly for the privilege of sending a PDF.

That model works for some people. It never felt right for me.

I wanted something simpler: a professional invoicing tool that runs entirely in the browser, stores data locally, works offline, and generates clean PDFs instantly without a backend. That is what Tech Invoice Forge is.

Tech Invoice Forge is a local-first invoice and receipt generator built for tech professionals, freelancers, and small teams who want speed, privacy, and control without subscription friction.

What Tech Invoice Forge does

At its core, Tech Invoice Forge lets you create invoices, preview them live, save them locally, and export them as PDFs or JSON.

The experience is intentionally straightforward:

Fill in sender and client details
Add line items, tax, and discounts
Watch the PDF preview update as you type
Save everything locally in the browser
Download the finished invoice instantly

There is no account to create and no server round trip for the core workflow.

Why build it this way?

I kept running into the same frustration with cloud invoicing software: too much overhead for a simple task.

If all I need is to generate a clean invoice and send it, why should I have to:

create an account
trust a third-party cloud database
wait for server-side rendering
pay for features I do not need
worry about my invoice history living somewhere else

Tech Invoice Forge is my answer to that problem.

The goal was not to make a bloated finance platform. The goal was to make a fast, reliable, privacy-first invoicing tool that feels like a native part of the browser.

What makes it different

Tech Invoice Forge is built around a few ideas that matter a lot in practice.

It works offline by default

All core data lives locally in IndexedDB. That means invoices, client records, and profile details stay on the device unless you choose to move them elsewhere later.

It gives instant feedback

The invoice preview updates as you type, so you can see the final document without waiting for a server response.

It keeps the workflow lightweight

The app includes the essentials without forcing unnecessary complexity:

sender profile management
saved client records
invoice history
multiple templates
currency support
notes and terms
PDF export

It stays out of your way

The app is designed to feel clean and professional, not crowded. You can open it, create an invoice, and get back to work quickly.

A quick tour of the product

The public site is split into a few simple experiences.

The landing page positions the app as a local-first alternative to cloud invoicing tools. It focuses on the promise: no accounts, no backend, no monthly subscription just to create a PDF.

The pricing page makes the product direction explicit. There is a Local Edition for people who want a self-contained workflow, and a Cloud Sync waitlist for users who may eventually want cross-device access and team features.

The invoice editor is where the product matters most. It includes sender details, client details, invoice metadata, line items, discounts, notes, and a live preview panel that shows the rendered result as you work.

The profile area keeps business details and client data organized so creating the next invoice is faster than starting from scratch every time.

The stack behind it

I built Tech Invoice Forge with a modern Svelte stack because the product benefits from being fast and reactive at the UI layer.

The current stack includes:

Svelte 5
SvelteKit 2
Tailwind CSS v4
IndexedDB for local persistence
Valibot for validation
pdfmake for PDF generation
Lucide icons for the interface
Bun for development

That combination fits the product well. The browser handles the entire workflow, and the app stays responsive while the user is entering data and previewing documents.

What I learned building it

The biggest lesson was that local-first software can feel better than cloud software when the problem is narrow and repetitive.

For invoicing, most users do not need a giant platform. They need:

speed
privacy
reliability
good defaults
a clean export path

When you remove the account wall and the backend dependency, the product becomes easier to trust and easier to use.

I also learned that a small set of thoughtful features is usually more valuable than a long list of generic ones. If the preview is instant, the data is local, and the PDF looks professional, the app already solves the core job.

Who this is for

Tech Invoice Forge is a good fit for:

freelancers who want a fast invoice workflow
developers who prefer local-first tools
agencies that want a lightweight billing tool
anyone who does not want their invoice data tied to a cloud account

If you care about privacy, portability, and a low-friction workflow, this kind of app makes a lot of sense.

Closing thoughts

I built Tech Invoice Forge because invoicing should not feel like signing up for another subscription service.

It should feel like opening a tool, doing the work, and getting a clean result immediately.

If that sounds useful, try the live demo and see how it feels in practice.

Live demo: https://tif.svelte-apps.me

GitHub: https://github.com/Michael-Obele/tif

DocShark: a local-first documentation MCP server for AI

Michael Amachree — Thu, 19 Mar 2026 10:39:23 +0000

DocShark: documentation for AI, served locally

Most AI tools are only as good as the documentation they can reach.
When the docs are spread across websites, rendered client-side, or buried behind a maze of pages, the context you get back is often incomplete or stale.

That is the problem DocShark is built to solve.

DocShark is a fast, local-first Model Context Protocol server that scrapes, indexes, and serves documentation from any website. It turns documentation into a local knowledge base that your AI tools can search instantly, without depending on a cloud service or an API key.

Live site:

dsharkd.svelte-apps.me

GitHub: https://github.com/Michael-Obele/docshark

What DocShark does

At a high level, DocShark does four things well:

Crawls documentation websites.
Extracts the useful content and converts it to clean Markdown.
Breaks pages into context-aware chunks.
Makes the result searchable through MCP and the CLI.

The result is a local documentation layer that works with coding agents, desktop clients, and terminal workflows.

Why I built it

There are already tools that can fetch docs, but many of them only work for a narrow source type or rely on heavier infrastructure.

DocShark focuses on a simpler model:

documentation websites, not just GitHub repos
local storage, not a remote index
SQLite FTS5, not a hosted search backend
Bun-first tooling, not a large runtime stack
MCP compatibility, so AI clients can use it directly

That combination makes it useful both for individual developers and for people building agent workflows.

How DocShark compares

Context7 is the obvious comparison point because it also solves the "AI needs current documentation" problem. It is strong when you want a hosted documentation service that injects up-to-date library docs and examples into your prompt.

DocShark takes a different path. It is better when you want to index real documentation websites, keep everything local, avoid API keys and rate limits, and use one tool for both MCP and CLI workflows.

Here is the practical tradeoff:

Tool	Strengths	Limitations	Where DocShark wins
Context7	Fresh version-specific docs, code examples, MCP integration, polished onboarding	Cloud service, API key/rate-limit considerations, focused on supported libraries rather than arbitrary websites	DocShark is better if you want a local-first index for any documentation site and no external dependency
Docfork	Broad library coverage, up-to-date docs, open source, easy access to software library docs	Optimized for library documentation rather than arbitrary rendered documentation sites	DocShark is better for crawling and indexing any docs website, including custom or rendered docs
Deepcon	Strong documentation retrieval for AI workflows, cloud-hosted convenience	More service-oriented than local-first, and it is narrower in how you manage your own source set	DocShark is better if you want to own the index and control exactly what gets crawled and stored
GitMCP / GitHub repo tools	Great for repository-centric docs and code browsing	Best when the source of truth lives in GitHub, not when the docs are published on a separate site	DocShark is better for public docs sites, rendered pages, and documentation that is not tied to one repo
Per-library MCP servers	Very targeted, often simple to set up for one project	They do not scale well when you need to switch between many libraries	DocShark is better as a single general-purpose server for multiple sources

If you want the shortest summary: Context7 is a strong hosted documentation service, but DocShark is the better alternative for local-first workflows, broader website coverage, and users who want to keep the whole documentation layer under their control.

Core features

Any documentation site

DocShark is not limited to source repositories. It can crawl public documentation sites and index their rendered content, which makes it useful for modern docs that are built from multiple routes, dynamic pages, or generated content.

Smart extraction

The scraper is designed to pull out the main content and discard the noise. Navigation, sidebars, and other non-essential layout elements are removed so the indexed result is easier for an AI assistant to use.

Semantic chunking

Pages are split by heading structure so the search results preserve context. That matters because a search result is only useful if it still knows where it came from in the document.

SQLite + FTS5 search

DocShark uses SQLite with FTS5 for full-text search, which keeps the entire experience local and fast.

That gives you:

instant keyword search
offline access once content is indexed
no external search provider
no dependency on cloud APIs

JS-rendered site support

Many docs sites are not simple static HTML pages.
DocShark supports rendered documentation sites, so it can work with sites that rely on JavaScript for content delivery.

Polite crawling

The crawler respects site structure and includes rate limiting and robots-aware behavior so it is safer to use against public documentation sites.

MCP server + CLI

DocShark exposes the same knowledge base through both an MCP server and a Bun-first CLI. That gives you two ways to work:

agent integrations for AI tools
direct terminal commands for indexing, searching, and maintenance

The workflow

Using DocShark usually looks like this:

1. Add a documentation site

Point DocShark at a docs URL to begin crawling:

bunx docshark add https://svelte.dev/docs

2. Search the indexed content

Once the content is indexed, you can search for the exact topic you need.

bunx docshark search "query syntax"

3. Connect your AI tool

Because DocShark speaks MCP, you can connect it to compatible clients and let the assistant query your documentation library directly.

{
  "mcpServers": {
    "docshark": {
      "command": "bunx",
      "args": ["-y", "docshark", "start", "--stdio"]
    }
  }
}

CLI features

DocShark includes a practical set of commands for day-to-day use:

Command	What it does
`start`	Runs the MCP server in HTTP or STDIO mode
`add`	Adds a new documentation source and starts crawling
`rename`	Renames an existing library without changing content
`search`	Searches the indexed documentation
`list`	Lists indexed libraries and their status
`refresh`	Re-crawls an existing library
`remove`	Deletes a library and its indexed content
`get`	Returns the full markdown content for a page
`info`	Shows details and indexed pages for a library
`update`	Checks for or installs a newer Bun release

That command surface makes the project useful even if you never connect it to an AI client.

MCP tools

On the protocol side, DocShark exposes a compact but useful toolset:

manage_library to add, rename, refresh, inspect, or remove a library
search_docs to search across indexed content
list_libraries to inspect what is available
get_doc_page to retrieve a full page in markdown form

Those tools are designed to map naturally to how people actually work with documentation.

What is inside the stack

DocShark keeps the stack intentionally small:

Bun for runtime and CLI execution
SQLite for persistence
FTS5 for search
Readability.js for extracting the main content
Turndown with GFM support for Markdown conversion
Valibot for validation
CAC for the CLI parser and command dispatch
TMCP for the protocol server
A shared library service that powers both the CLI and MCP server

The current MCP surface is intentionally compact:

manage_library for add, rename, refresh, inspect, and remove workflows
search_docs for ranked search
list_libraries for discovery
get_doc_page for full-page retrieval

That choice keeps the project local, fast, and easier to reason about than a larger server stack.

Who it is for

DocShark is a good fit if you:

use AI coding assistants regularly
want documentation access inside your editor or terminal
work with documentation sites that are not simple markdown repos
prefer local tools over hosted indexing services
want one general-purpose MCP server instead of many per-library integrations

Try it out

If you want to see the project in action, open the live site and source repo above.

Star DocShark on GitHub

Closing thought

DocShark is a small idea with a practical goal: make documentation available where AI tools already work, without handing your context over to a cloud service.

If you spend time jumping between docs tabs, terminal commands, and assistant prompts, it is the kind of tool that quietly removes friction from the whole workflow.

What Your AI Chat History Says About Your Love Life (A Valentine’s Roast)

Michael Amachree — Sat, 14 Feb 2026 22:40:34 +0000

It’s Valentine’s Day. The air is filled with the scent of roses, expensive chocolates, and the faint ozone smell of servers overheating.

While everyone else is out having candlelit dinners, some of us are right here, staring at a blinking cursor, asking a Large Language Model why our CSS grid isn't centering. But have you ever stopped to think that your relationship with your AI might be a mirror for your actual romantic life?

I took a look at the most common "AI conversation archetypes" among developers. Find your chat style below, and accept your diagnosis.

1. The "Fix This Immediately" Typer

The Logs:

"Error: undefined is not a function. Fix it."
"Still broken. Try again."
"Why did you import a library I don't have? REFOCUS."

The Diagnosis: The Toxic Ex.
You don't want a partner; you want a miracle worker who can read your mind without you communicating your needs. You provide zero context, demand immediate results, and threaten to switch to a different model the second things get difficult. In relationships, you’re probably the one who says "I'm fine" when you are absolutely, cataclysmically not fine, and then gets mad when your partner doesn't guess why.

Prescription: touch grass (or at least add a "please").

2. The Over-Explainer

The Logs:

"Hi! Hope you're having a good processing cycle. So, I have this React component—it's a button, but not just any button, it represents the existential dread of the user. I want it to be blue, but like, a sad blue? Here is the entire history of the project since 2019 for context..."

The Diagnosis: The Stage 5 Clinger.
You pour your heart out. You treat every prompt like a first date where you simply must explain your entire childhood trauma before the appetizers arrive. You crave deep connection and context, but you’re mostly just exhausting the token limit. In love, you’re sending 14-paragraph texts at 2 AM asking "What are we?" after one coffee date.

Prescription: Learn to summarize. Your AI (and your date) doesn't need to know about the legacy code from three years ago.

3. The "Just Copy-Paste" trust fall

The Logs:

"Write me a full auth system in Go."
(User copies code without reading it)
(User deploys to production)
(Production crashes)
"Why did you do this to me??"

The Diagnosis: The Hopeless Romantic.
You fall in love fast and hard. You trust blindly. You see a snippet of code that looks vaguely correct, and you’re already planning the wedding (deployment). You ignore all the red flags (security vulnerabilities) because you just want it to work so bad. When it inevitably breaks your heart, you blame the universe instead of your lack of unit tests.

Prescription: Code review is a love language. Use it.

4. The Gaslighter

The Logs:

"Are you sure that's the syntax? Pretty sure it's not."
"I think you're hallucinating. That library doesn't exist."
(AI apologizes)
"Actually, wait, you were right. But you should have been more confident."

The Diagnosis: The "It’s Complicated."
You enjoy the power dynamic. You like testing boundaries. You don't actually want the answer; you want to see if you can trick the other party into slipping up. This is a relationship built on intellectual one-upmanship. It’s exhausting, it’s petty, and frankly, it’s why you’re spending Valentine's Day arguing with a non-sentient neural network about the efficacy of var vs let.

Prescription: Admit when you're wrong. It’s sexy.

5. The "Prompt Engineer" Perfectionist

The Logs:

"Act as a senior Rust engineer with 20 years of experience, a PhD in CompSci, and a penchant for dry humor. Analyze this function using the Socratic method..."

The Diagnosis: The Checklist Dater.
You have a list of requirements for a partner that is longer than a webpack config file. You don't want a connection; you want a customized build. You spend more time tweaking your dating profile (prompt) than actually going on dates (coding). You are paralyzed by the idea that there might be a slightly better optimization out there.

Prescription: Sometimes npm install is good enough. Perfect is the enemy of "shipped."

So, who is your Valentine?

Whether you're treating your AI like a therapist, a junior dev, or a magical oracle, remember: at least the AI replies instantly and never judges you for eating pizza over the sink at 3 AM.

Happy Valentine's Day, devs. May your commits be clean, your tests pass, and your deployment pipelines remain green. ❤️

Day 12: The Grand Finale & New App Launch! (Countdown Timer)

Michael Amachree — Wed, 31 Dec 2025 19:41:28 +0000

🎄 Day 12 of 12 Days of Svelte Apps 🎄

We made it! To celebrate the finale, we are launching a brand new mini-app today.

🎁 Presenting: The Countdown Timer

🔗 Start counting: https://svelte-apps.me/apps/countdown-timer

Why we love countdowns

Did you know the first crowd countdown (in Times Square/NYC) only started in 1979? It's a surprisingly modern tradition.

We love them because they mark a "genesis moment"—when time resets and anything feels possible.

Features

This new app lets you:

Set a target date and time
See a live, ticking breakdown of Days, Hours, Minutes, and Seconds
Enjoy a distraction-free, beautiful interface

Thank You!

Thank you for following along with this 12-day series. We've explored everything from budget trackers to text summarizers.

The Svelte MiniApps collection is open source and growing. If you want to contribute in 2025, come join us on GitHub!

Happy Holidays and a Happy New Year! 🥂

Day 11: New Year, New Security (Password Generator)

Michael Amachree — Wed, 31 Dec 2025 19:40:03 +0000

It’s Day 11 of 12 Days of Svelte Apps 🎄

As we approach the New Year, it's the perfect time for a "Digital Deep Clean".

Verify your backups, unsubscribe from spam, and update your weak passwords.

Fact: "123456", "password", and "admin" are still the most leaked passwords in 2024.

Today's app: Random Password Generator.

🔗 Generate a key: https://svelte-apps.me/apps/random-password-generator
💻 View the code: https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/random-password-generator

Why use this over a server-side tool?

Privacy.

This app runs entirely in your browser. The passwords generated never leave your device. There is no API call involved in the generation logic.

Features

Length Control: Go beyond 8 characters. Try 20+.
Character Sets: Toggle symbols, numbers, upper/lowercase.
One-click Copy: Grab it and paste it into your password manager.

Start 2025 secure.

Day 10: Visualize Your 2024 Code Journey (GitHub Tracker)

Michael Amachree — Wed, 31 Dec 2025 19:38:57 +0000

It’s Day 10 of 12 Days of Svelte Apps 🎄

The end of the year is a time for reflection. For developers, that often means looking at our contribution graphs.

Today's app is the GitHub Contribution Tracker, a tool to visualize and celebrate your open source activity.

🔗 Create your summary: https://svelte-apps.me/apps/github-contribution-tracker
💻 View the code: https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/github-contribution-tracker

More Than Green Squares

While GitHub's profile graph is iconic, sometimes you want focused data:

What was my longest streak?
How many total contributions did I make?
Which repos got the most love?

Built with SvelteKit

This app demonstrates fetching data from the GitHub GraphQL API server-side and rendering visual components with Svelte. It handles authentication and data visualization seamlessly.

Share your stats in the comments! 👇

Day 9: Smart Holiday Shopping & Travel (Currency Converter)

Michael Amachree — Wed, 31 Dec 2025 19:37:37 +0000

It’s Day 9 of 12 Days of Svelte Apps 🎄

Shopping globally for gifts? Planning a winter getaway?

Don't guess with your money. Today's app is the Currency Converter.

🔗 Try it live: https://svelte-apps.me/apps/currency-converter
💻 View the code: https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/currency-converter

real-time Rates

We hook into live exchange rate APIs to ensure you're getting current data, not last month's numbers.

Features

150+ Currencies: From AUD to ZAR.
Instant Calculation: Reactivity in Svelte makes conversions feel immediate.
Reverse Mode: Easily swap source and target currencies.

Save your budget this holiday season by knowing exactly what you're spending.

Day 8: Recipe Conversions Without the Panic (Unit Converter)

Michael Amachree — Wed, 31 Dec 2025 17:55:11 +0000

It’s Day 8 of 12 Days of Svelte Apps 🎄

Holiday cooking is fun… right up until the recipe switches units on you.

cups vs milliliters
ounces vs grams
Fahrenheit vs Celsius

So today’s mini-app is the Unit Converter — a clean, fast converter you can keep open while you cook.

🔗 Try it live: https://svelte-apps.me/apps/unit-converter
💻 View the code: https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/unit-converter

What it does

The UI is intentionally simple:

Pick a unit category (Volume, Temperature, Mass, etc.)
Enter a value
Choose “From” and “To” units
Get a formatted result instantly

It also includes a Swap button so you can flip the direction quickly, and a Clear action to reset the input.

What makes it feel good to use

Results are formatted cleanly (so you don’t get unreadable long decimals)
It handles "same unit" conversions gracefully
It supports a wide set of categories beyond cooking too (length, area, time, angle, data, energy, force, power, pressure)

A few holiday-friendly conversions to try

Oven temperature

If your recipe says 350°F but you’re using a °C oven, pick Temperature and convert.

Cups to milliliters

For recipes written in US cups, pick Volume and convert to mL for a measuring jug.

Ounces to grams

For baking (where precision matters), converting to grams can make measuring a lot easier.

If you try it, post a conversion you used today (or a recipe you’re making) and tag me.

Day 7: Holiday Word of the Day (English Dictionary App)

Michael Amachree — Wed, 31 Dec 2025 17:42:56 +0000

It’s Day 7 of 12 Days of Svelte Apps 🎄

If you want a tiny holiday habit that takes less than a minute, try this:

Pick one word you heard today and look it up.

Maybe it’s from a carol, a Christmas movie, a family recipe, or a caption you’re writing.

Today’s mini-app is the English Dictionary App — a clean word lookup tool that focuses on the stuff you actually want:

clear definitions
pronunciation (including audio when available)
synonyms and antonyms
examples and word origin (when provided)

🔗 Try it live: https://svelte-apps.me/apps/dictionary-app
💻 View the code: https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/dictionary-app

What you get from one search

Type a word and hit Find Meaning.

The results are organized so you can skim quickly:

the word + phonetic spelling
pronunciation buttons (tap to play)
meanings grouped by part of speech (noun/verb/etc.)
numbered definitions (with examples when available)
a small set of synonyms/antonyms (deduped and kept readable)

There’s also a Cached indicator when results come from cache — a nice detail when you’re searching the same word again.

Holiday words to try (starter pack)

merriment
tinsel
solstice
carol
yule

Why this is a great micro-app

It’s not trying to be a full language-learning platform. It’s a quick lookup tool with:

a friendly empty state
a solid loading experience (skeleton UI)
a clear error state when a word isn’t found

If you try it, reply with your holiday word of the day.

Day 6: Christmas Emoji Challenge (Advanced Emoji Tools)

Michael Amachree — Wed, 31 Dec 2025 17:32:55 +0000

It’s Day 6 of 12 Days of Svelte Apps 🎄

Today we’re doing something fun: Advanced Emoji Tools.

🔗 Try it live: https://svelte-apps.me/apps/advanced-emoji-tools
💻 View the code: https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/advanced-emoji-tools

This one is built for speed: search emojis, transform text, and copy results instantly.

Challenge

Post a Christmas song in emojis and let people guess.

Examples:

🔔🔔🔔
🎅🛷🌙
❄️🏠🔥☕

What the app includes

Transform: emojify text (and reverse it)
Search: type a keyword, hit enter, and grab the exact emoji you want
Random: roll a random emoji when you need inspiration
Check: see whether a word has an emoji equivalent

The app makes it easy to search + copy emojis quickly — perfect for turning replies into little puzzles.

A few ready-to-post prompts

“Guess the movie”: 🧑‍🎄🏠🧱🪤
“Holiday vibe check”: 🎄☕📚✨
“Travel day”: ✈️🧳❄️

Day 5: Festive QR Gift Tags (QR Code Generator)

Michael Amachree — Wed, 31 Dec 2025 17:31:39 +0000

It’s Day 5 of 12 Days of Svelte Apps 🎄

Today’s featured mini-app is the QR Code Generator.

🔗 Try it live: https://svelte-apps.me/apps/qr-code-generator
💻 View the code: https://github.com/Michael-Obele/Svelte-MiniApps/tree/main/src/routes/apps/(app)/qr-code-generator

If you’ve never used QR codes beyond restaurant menus, here’s a holiday twist: QR gift tags.

Instead of writing a long URL on a tag (or texting it later), you generate a QR once, download it, and print it.

What it can generate

The app includes three quick modes:

Text/URL: any message or link
Contact Card: generate a vCard-style QR for sharing contact details
Social Links: bundle multiple links into one QR payload

3 holiday uses (that feel a little magical)

1) Video greeting tag: link a short "Merry Christmas" video.
2) Playlist gift: link a Spotify/Apple playlist.
3) Photo album: link a shared album.

Bonus idea: add a QR to a “coupon” gift ("One free coffee", "Movie night", "Car wash") and link it to a note or a digital card.

Quick how-to

Open the app
Pick Text/URL, Contact Card, or Social Links
Enter your info
Download the QR code image
Print it small and tape it to a tag 🎁

Generate → download → print. That’s it.

🚀 Boost Your Svelte DX: A Guide to the Vite Svelte Inspector

Michael Amachree — Wed, 31 Dec 2025 00:06:35 +0000

Ever found yourself staring at a UI element in your browser, wondering exactly which component file it lives in?

If you are using Svelte with Vite, there is a powerful tool designed to solve exactly that. Meet @sveltejs/vite-plugin-svelte-inspector.

This plugin adds a DOM inspector directly to your browser during development. When enabled, you can hover over an element to see its file path and click to automatically open your code editor at that exact location.

Here is how to set it up and customize it to fit your workflow.

🛠️ The Setup

First, ensure you have @sveltejs/vite-plugin-svelte installed (it's a peer dependency).

The inspector is actually built into the Svelte config logic. You don't usually need to install a separate package if you are on a recent version of Svelte/Vite, but you do need to enable it.

1. Basic Enable

Open your svelte.config.js and simply set the inspector to true inside vitePlugin.

// svelte.config.js
export default {
  vitePlugin: {
    inspector: true
  }
};

2. Custom Configuration

If you want to change how you toggle the inspector or where the button sits, you can pass an object instead of a boolean.

// svelte.config.js
export default {
  vitePlugin: {
    inspector: {
      toggleKeyCombo: 'alt-x',
      showToggleButton: 'always',
      toggleButtonPos: 'bottom-right'
    }
  }
};

💡 Pro Tip: Personalize with Environment Variables

This is arguably the coolest feature. Inspector settings—like key combos—are often personal preferences. Your teammate might love Alt-x, but you might prefer Cmd-Shift.

You shouldn't have to fight over the svelte.config.js file in Git.

The inspector allows you to configure options via Environment Variables (shell or .env files). These take precedence over the config file!

# Set a custom key combo (unquoted string)
SVELTE_INSPECTOR_TOGGLE=alt-x

# Pass a full JSON options object
SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}'

# Disable it completely for your machine
SVELTE_INSPECTOR_OPTIONS=false

⚙️ Configuration Reference

Here is a breakdown of the options you can tweak to make the inspector feel right for you.

Toggle & Display

toggleKeyCombo (string): The shortcut to turn the inspector on/off.
Default: 'alt-x'
Tip: Use modifiers + key, like control-shift-o.
showToggleButton ('always' | 'active' | 'never'): Controls the on-screen UI button.
Default: 'active' (shows only when inspector is on).
toggleButtonPos ('top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): Where the floating button appears.
Default: 'top-right'
holdMode (boolean): If true, the inspector is only active while you hold down the toggle keys. If false, the keys act as a switch.
Default: true

Navigation & Accessibility

You can navigate the DOM tree using your keyboard!

navKeys:
parent: 'ArrowUp'
child: 'ArrowDown'
next: 'ArrowRight' (next sibling)
prev: 'ArrowLeft' (previous sibling)
openKey: Key to open the editor.
Default: 'Enter'
escapeKeys: Keys to close the inspector.
Default: ['Backspace', 'Escape']

Styling

customStyles (boolean): Defaults to true. This injects styles when active.
If you want to override the inspector's look, the body gets the class svelte-inspector-enabled, and the hovered element gets svelte-inspector-active-target.

📝 Editor Support

The "Click-to-Open" magic relies on your editor being recognized.

Standard editors (VS Code, WebStorm, etc.) are usually supported out of the box. However, if your editor isn't opening:

Check the Supported Editors list.
Follow the Custom Editor instructions if yours is obscure or requires a specific binary path.

Happy debugging! 🐛➡️✨

🔗 Reference

For the most up-to-date options and details, check out the official documentation on GitHub.