wolandark/vim-live-server

A live web server for Vim/NeoVim - see your changes in real time

Vim Live Server

Preview your web development in your browser in real time.

A dead-simple live server for Vim/NeoVim
Supporting live-server and browser-sync.

Dependency

• nodejs
• npm

Install either the live-server or the browser-sync package globally using npm:

sudo npm install -g live-server
sudo npm install -g browser-sync

Installation

Use your favorite Vim plugin manager to install vim-live-server.

Using Vim packages (needs Vim 8+)

git clone https://github.com/wolandark/vim-live-server.git ~/.vim/pack/plugins/start/vim-live-server/

Using vim-plug

Add the following line to your plugin configuration in your .vimrc file:

Plug 'https://github.com/wolandark/vim-live-server.git'

With vimplug you can use one of these alternative commands that uses a post-installation hook to download the live-server or the browser-sync package from npm automatically:

Plug 'https://github.com/wolandark/vim-live-server.git', { 'do': 'sudo npm install -g live-server' }
Plug 'https://github.com/wolandark/vim-live-server.git', { 'do': 'sudo npm install -g browser-sync' }

Using Vundle

Plugin 'https://github.com/wolandark/vim-live-server.git'

Using Pathogen

Clone the vim-live-server repository into your Vim bundle directory:

cd ~/.vim/bundle
git clone https://github.com/wolandark/vim-live-server.git

Usage

Open your index.html file in vim and issue the following in ex-mode. live-server will start and bind itself to localhost:8080 and browser-sync will bind to localhost:3000.
Notice that all of the commands use pascal case

StartLiveServer

or

StartBrowserSync

Vim Live Server opens your default browser automatically.

To start serving on a specific port, use:

StartLiveServerOnPort N
StartLiveServerOnPort 2222

StartBrowserSyncOnPort N
StartBrowserSyncOnPort 3001

To kill the server on the default port 3000 use this:

KillLiveServer

KillBrowserSync

Use this command to kill the server on a certain port:

KillLiveServerOnPort N
KillLiveServerOnPort 2222

KillBrowserSyncOnPort N
KillBrowserSyncOnPort 3001

Note: vim-live-server will kill all running instances of live-server and browser-sync on VimLeave.

Optional keybindings

nmap <F2> :StartLiveServer <CR>
nmap <F3> :KillLiveServer <CR>

nmap <F2> :StartBrowserSync <CR>
nmap <F3> :KillBrowserSync <CR>

Thats it! Enjoy!

Demo

browser-sync.mp4

Note on Two Backends

Vim Live Server offers flexibility by supporting two backend options: live-server and browser-sync. However, users need to install and use only one of them, depending on their preferences and requirements.

The inclusion of live-server is motivated by its straightforward and efficient approach, and a 'no-nonsense' nature. Notably, it avoids resetting the scroll position on reload, providing a seamless experience during development.

Choose the backend that best aligns with your workflow and and enjoy using you favorite editor for development.

Contact me

Feel free to reach out on Telegram or email for support, feedback, or contributions.

vim-live-server's Issues

scroll position gets reset

Every time I save my changes to my files the browser window refreshes and my scroll position goes back to the top.

I don't understand much about Browsersync but maybe there's some particular flag which can be set so that it injects changes instead of reloading the site?

This doesn't happen with the live-server npm package, have you considered using that instead? It seems to be a simpler solution. It hasn't been updated in 2 years but there's an apparently active fork:
https://github.com/ljcp/alive-server