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.

Index

• Dependency
• Installation
  • Using Vim packages
  • Using vim-plug
  • Using Vundle
  • Using Pathogen
• Usage
• Optional keybindings
• Demo
• Note on Two Backends
• Contact me
• Contribution Guide

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.

Contribution Guide

Please follow contribution conventions when submiting pull requests. See Conventional Commits for more information.

Contact me

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