# Cross-Language Recipes (Astro, Svelte, Marko & more)

> [Docs Index](README.md) • [Repo README](../README.md) • [Plugin Authoring](plugin-authoring.md) • [Source Map & Code Gen](source-map-and-code-gen.md)

Volar’s architecture is not limited to Vue. This guide outlines how teams have adapted Volar’s language-service stack to other component dialects such as Astro, Svelte, and Marko, plus concrete examples of the required plugins and configuration.

## Astro

Astro combines multiple frameworks in `.astro` files. The Astro team built [`astro-language-tools`](https://github.com/withastro/language-tools), which reuses Volar concepts.

### Key Ideas

- Implement a language plugin that parses `.astro` files and produces virtual TypeScript modules for frontmatter, component scripts, and template expressions.
- Expose Astro-specific transforms through `@volar/language-core`.
- Register custom Volar services for diagnostics (e.g., checking `Astro.props` usage).

### Resources

- [astro-language-tools](https://github.com/withastro/language-tools) repo (look at `pkg/language-server` for Volar integration).
- `astro` VS Code extension uses the Volar-style LSP plus additional analyzers.

## Svelte

Svelte has its own LSP, but you can reuse Volar patterns to extend it or embed Svelte files in hybrid projects.

### Hybrid Example (Vue + Svelte)

- Use `nvim-lspconfig` or VS Code multi-root settings to run both the Svelte LSP and Volar simultaneously.
- For shared tooling (e.g., CLI diagnostics), build a language plugin that treats `.svelte` similarly to `.vue`, generating TS code via Svelte’s compiler.
- Reference: [sveltejs/language-tools](https://github.com/sveltejs/language-tools). Their `svelte2tsx` pipeline mirrors Volar’s `code-gen` approach.

## Marko

[Marko](https://markojs.com/) (eBay) uses `.marko` files that compile to HTML + JS.

- Implement a language plugin that compiles Marko templates to TypeScript using Marko’s compiler.
- Use `@volar/typescript` to expose the generated TS to Volar’s language service.
- Provide custom diagnostics for Marko-specific syntax; reuse `volar-service-html` for HTML-level completions.

## Tailwind / CSS frameworks

- Install `volar-service-css` and community Tailwind plugins (`@volar-plugins/tailwind`). Configure globs for `tailwind.config.js`.
- For multi-language files (e.g., `.astro` + Tailwind), ensure your custom language plugin marks embedded `<style>` blocks so the CSS service can attach.

## Markdown + Vue (MDX-style)

- Use custom language plugins to parse `.md`/`.mdx` and extract fenced Vue blocks.
- Register `extensions: ["vue", "md"]` in `vueCompilerOptions`.
- Example: VitePress and VuePress use Volar internally to provide IntelliSense inside markdown code fences.

## Practical Steps for Any Language

1. **Parse Source** – Use the language’s compiler/AST to split out scripts/templates/styles.
2. **Emit Virtual TS/HTML** – Leverage `@volar/code-gen` to map source segments to generated code.
3. **Hook TypeScript** – Configure `@volar/typescript` so TypeScript sees the generated files.
4. **Add Services** – Register diagnostic/completion services specific to the language (macros, components).
5. **Integrate Editors** – Use `@volar/kit` for LSP, `@volar/monaco` for playgrounds, `@volar/editor` for custom IDEs.

## Example Repositories

- [astro-language-tools](https://github.com/withastro/language-tools) – Astro + Volar integration.
- [windicss/windicss-intellisense](https://github.com/windicss/windicss-intellisense) – Tailwind-style completions built as Volar services.
- [sxzz/vue-macros](https://github.com/sxzz/vue-macros/tree/main/packages/volar) – Macros across templates; good reference for cross-cutting features.

By following these patterns, you can bring Volar’s robust TypeScript-driven tooling to any component format—just adapt the language plugin/code-gen layer, then reuse the existing language-service infrastructure.***