Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brianhuster/live-preview.nvim
A Live Preview Plugin for Neovim that allows you to view Markdown, HTML (along with CSS, JavaScript), AsciiDoc, SVG files in a web browser with live updates.
https://github.com/brianhuster/live-preview.nvim
asciidoc asciidoctor html live-preview live-server lua markdown markdown-it neovim neovim-plugin nvim nvim-plugin svg
Last synced: about 9 hours ago
JSON representation
A Live Preview Plugin for Neovim that allows you to view Markdown, HTML (along with CSS, JavaScript), AsciiDoc, SVG files in a web browser with live updates.
- Host: GitHub
- URL: https://github.com/brianhuster/live-preview.nvim
- Owner: brianhuster
- License: gpl-3.0
- Created: 2024-07-24T10:30:05.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-08T18:25:08.000Z (12 days ago)
- Last Synced: 2025-02-12T23:16:35.334Z (7 days ago)
- Topics: asciidoc, asciidoctor, html, live-preview, live-server, lua, markdown, markdown-it, neovim, neovim-plugin, nvim, nvim-plugin, svg
- Language: Lua
- Homepage:
- Size: 3.62 MB
- Stars: 109
- Watchers: 3
- Forks: 5
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Introduction :wave:
[](https://luarocks.org/modules/brianhuster/live-preview.nvim)
live-preview.nvim is a plugin for Neovim that allows you to view [Markdown](https://en.wikipedia.org/wiki/Markdown), [HTML](https://en.wikipedia.org/wiki/HTML) (along with CSS, JavaScript), [AsciiDoc](https://asciidoc.org/) and [SVG](https://en.wikipedia.org/wiki/SVG) files in a web browser with live updates. No external dependencies or runtime like NodeJS or Python are required, since the backend is fully written in Lua and Neovim's built-in functions.
# Features :sparkles:
* Preview Markdown, AsciiDoc, SVG with live updates as you type
* Preview HTML (with CSS and JavaScript) with live updates as you save the file
* Supports KaTeX and Mermaid for rendering math equations and diagrams in Markdown and AsciiDoc files
* Syntax highlighting for code blocks in Markdown and AsciiDoc 🖍️
* Supports sync scrolling in the browser as you scroll in the Markdown files in Neovim.
* Integration with [telescope.nvim](https://github.com/nvim-telescope/telescope.nvim) 🔭, [`fzf-lua`](https://github.com/ibhagwan/fzf-lua) and [`mini.pick`](https://github.com/echasnovski/mini.pick)
# Updates :loudspeaker:
See [RELEASE.md](RELEASE.md)
**⚠️ Important Notice:** You should clear the cache of the browser after updating to ensure the plugin works correctly.
# Demo video :movie_camera:
https://github.com/user-attachments/assets/865112c1-8514-4920-a531-b2204194f749
# Installation :package:
**Requirements**
- Neovim >=0.10.1
- A modern web browser
- PowerShell (only if you use Windows)
You can install this plugin using a plugin manager. Most plugin managers are supported. Below are some examples
Using lazy.nvim (recommended) 💤
```lua
{
'brianhuster/live-preview.nvim',
dependencies = {
-- You can choose one of the following pickers
'nvim-telescope/telescope.nvim',
'ibhagwan/fzf-lua',
'echasnovski/mini.pick',
},
}
```
mini.deps 📦
```lua
MiniDeps.add({
source = 'brianhuster/live-preview.nvim',
depends = {
-- You can choose one of the following pickers
'nvim-telescope/telescope.nvim',
'ibhagwan/fzf-lua',
'echasnovski/mini.pick',
},
})
```
rocks.nvim 🪨
```vim
:Rocks install live-preview.nvim
```
vim-plug 🔌
```vim
Plug 'brianhuster/live-preview.nvim'
" You can choose one of the following pickers
Plug 'nvim-telescope/telescope.nvim'
Plug 'ibhagwan/fzf-lua'
Plug 'echasnovski/mini.pick'
```
Native package (without a plugin manager) 📦
```sh
git clone --depth 1 https://github.com/brianhuster/live-preview.nvim ~/.local/share/nvim/site/pack/brianhuster/start/live-preview.nvim
nvim -c 'helptags ~/.local/share/nvim/site/pack/brianhuster/start/live-preview.nvim/doc' -c 'q'
```
You may need to run `helptags ALL` in Neovim to generate the help tags, if your plugin manager does not do it for you.
### Note for HTML
This plugin supports live-previewing Markdown, AsciiDoc and SVG files without the need to save the file. However, for HTML files, the preview will only be updated when you save the file.
You can create an autocmd that auto save the file when you leave insert mode.
```lua
--- Lua
vim.o.autowriteall = true
vim.api.nvim_create_autocmd({ 'InsertLeavePre', 'TextChanged', 'TextChangedP' }, {
pattern = '*', callback = function()
vim.cmd('silent! write')
end
})
```
```vim
" Vimscript
set autowriteall
autocmd InsertLeavePre,TextChanged,TextChangedP * silent! write
```
# Configuration, usage, FAQ
You can configure this plugin by passing a table to the Lua function
```lua
require('livepreview.config').set()
```
See [`:h livepreview`](./doc/livepreview.txt) for all configurations options, as well as usage and FAQ.
# Contributing :handshake:
Since this is a young project, there should be a lot of rooms for improvements. If you would like to contribute to this project, please feel free to open an issue or a pull request.
# Roadmap :rocket:
See [TODO](https://github.com/brianhuster/live-preview.nvim/milestone/1)
# Acknowledgements 🙏
* [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) and [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) for the idea inspiration
* [glacambre/firenvim](https://github.com/glacambre/firenvim) for the sha1 function reference
* [sindresorhus/github-markdown-css](https://github.com/sindresorhus/github-markdown-css) CSS style for Markdown files
* [markdown-it/markdown-it](https://github.com/markdown-it/markdown-it) for parsing Markdown files
* [asciidoctor/asciidoctor.js](https://github.com/asciidoctor/asciidoctor.js) for parsing AsciiDoc files
* [KaTeX](https://github.com/KaTeX/KaTeX) for rendering math equations
* [mermaid-js/mermaid](https://github.com/mermaid-js/mermaid) for rendering diagrams
* [digitalmoksha/markdown-it-inject-linenumbers](https://github.com/digitalmoksha/markdown-it-inject-linenumbers) : A markdown-it plugin for injecting line numbers into html output
# Buy me a coffee ☕
Maintaining this project takes time and effort, especially as I am a student now. If you find this project helpful, please consider supporting me :>
# Alternatives
See [Wiki](https://github.com/brianhuster/live-preview.nvim/wiki/Alternatives-to-live%E2%80%90preview.nvim) for alternatives to live-preview.nvim
