🌟 datastar.nvim

IDE-quality Datastar support for Neovim

Completions · Hover Docs · Diagnostics · Signal Navigation · Dependency Graph

The most feature-rich Datastar development experience in any editor.

---

✨ Features at a Glance

Smart Completions

Type data- and get context-aware completions for all 31 Datastar plugins, with descriptions and docs links.

Rich Hover Documentation

Press K on any data-* attribute to see descriptions, available modifiers, and curated code examples.

Real-Time Diagnostics

Catch mistakes as you type — duplicate modifiers, conflicting options, unclosed expressions, and more.

Event Type Narrowing

Type evt. inside a data-on handler and get completions specific to that event type. keydown shows KeyboardEvent properties, click shows MouseEvent properties.

Signal Goto Definition

Press gd on any $signal reference to jump to where it was defined.

Signal Dependency Graph

Run :DatastarSignalGraph to visualize how computed signals depend on each other.

---

🚀 Quick Start

Install with lazy.nvim

{
  "WillEhrendreich/datastar.nvim",
  ft = "html",
  opts = {},
}

Install with packer.nvim

use {
  "WillEhrendreich/datastar.nvim",
  config = function()
    require("datastar").setup()
  end,
  ft = "html",
}

Verify

:checkhealth datastar

That's it. Open an HTML file, type data-, and completions appear.

---

🔌 Completion Engines

Works with your existing setup — pick one:

Engine	Setup
omnifunc (built-in)	Zero config. Press <C-x><C-o>
nvim-cmp	Add { name = "datastar" } to sources
blink.cmp	Add datastar provider — see Integrations

nvim-cmp config

cmp.setup({
  sources = cmp.config.sources({
    { name = "nvim_lsp" },
    { name = "datastar" },
    { name = "luasnip" },
  }),
})

blink.cmp config

{
  "Saghen/blink.cmp",
  opts = {
    sources = {
      default = { "lsp", "path", "snippets", "buffer", "datastar" },
      providers = {
        datastar = {
          name = "datastar",
          module = "datastar.cmp_source",
          score_offset = 100,
        },
      },
    },
  },
}

---

🧠 What It Knows

The plugin understands the full Datastar attribute grammar:

data-[plugin]:[key]__[modifier].[arg]="expression"

Context	Trigger	What You Get
Attribute name	data-	All 31 plugins with descriptions
Key	data-on:	DOM events, HTML attrs, CSS classes
Modifier	__	Plugin-specific modifiers
Modifier arg	__debounce.	Time values, flags
Expression	="..."	$signals, @actions(), evt.*

31 plugins · 83 DOM events · 97 HTML attributes · 8 backend actions · full modifier trees

---

⚙️ Configuration

require("datastar").setup({
  diagnostics = true,       -- inline error/warning diagnostics
  hover = true,             -- K for hover docs
  goto_definition = true,   -- gd for signal navigation
  filetypes = { "html" },   -- activate for these filetypes
  version = nil,            -- filter features by Datastar version
})

---

📚 Documentation

Guide	Description
Getting Started	Installation and first steps
Completions	All 5 completion contexts explained
Diagnostics	Error detection and severity levels
Navigation	Goto definition and signal graph
Configuration	All options with defaults
Integrations	nvim-cmp and blink.cmp setup

---

🏗️ Architecture

This is a pure Lua plugin — no LSP server binary, no Node.js, no external processes. Datastar's attribute grammar is finite, so the entire schema lives in a Lua table and the context parser is a fast backward scan from your cursor position.

• Zero startup cost — no process to spawn
• Instant completions — no network round-trips
• Works offline — everything is bundled
• 275 tests — thoroughly tested with busted

---

🙏 Acknowledgments

• Datastar by Delaney Gillilan — the hypermedia framework this plugin supports
• htmx-lsp — inspiration for the approach
• The Datastar VSCode extension and IntelliJ plugin — reference implementations

📄 License

MIT