Introduction 👋

live-preview.nvim is a plugin for Neovim that allows you to view Markdown, HTML (along with CSS, JavaScript), AsciiDoc and 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 ✨

• 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 🔭, fzf-lua and mini.pick

Updates 📢

See RELEASE.md

⚠️ Important Notice: You should clear the cache of the browser after updating to ensure the plugin works correctly.

Demo video 🎥

demo.mp4

Installation 📦

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) 💤

{
    '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 📦

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 🪨

:Rocks install live-preview.nvim

vim-plug 🔌

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) 📦

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
vim.o.autowriteall = true
vim.api.nvim_create_autocmd('InsertLeavePre', {
    pattern = '*', callback = function()
        vim.cmd('silent! write')
    end
})

" Vimscript
set autowriteall
autocmd InsertLeavePre * silent! write

Configuration, usage, FAQ

You can configure this plugin by passing a table to the Lua function

require('livepreview.config').set()

See :h livepreview for all configurations options, as well as usage and FAQ.

Contributing 🤝

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 🚀

See TODO

Acknowledgements 🙏

• Live Server and Live Preview for the idea inspiration
• glacambre/firenvim for the sha1 function reference
• sindresorhus/github-markdown-css CSS style for Markdown files
• markdown-it/markdown-it for parsing Markdown files
• asciidoctor/asciidoctor.js for parsing AsciiDoc files
• KaTeX for rendering math equations
• mermaid-js/mermaid for rendering diagrams
• 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 for alternatives to live-preview.nvim