web-tools.nvim

• Neovim Wrapper for ❤️ browser-sync
• http/ccs LSP.
• Hurl/curl web API testing
• npm/yarn/pnpm/npx/node wrapper

Fetures

• View your html/css files with a live web server locally
• HTML & CSS tag rename, repeat rename action
• Test your web API with Hurl/curl
• Run npm/yarn/pnpm/npx/node command and automatically open browser for preview in neovim

web server live view

webtools.mov

Test web API with Hurl

Install

• require
  • neovim 0.7+
  • browser-sync
  • optional: lspconfig & vscode-langservers-extracted

Install browser sync

npm install -g browser-sync

or withing neovim run :Npm install -g browser-sync

LSP for html & cssls

npm i -g vscode-langservers-extracted

or within neovim run :Npm install -g vscode-langservers-extracted

Instal hurl

install hurl

Other depencies

Not required, but recommended

• guihua.lua for floating window
• prettier for html/css format
• jq for json format
• Treesitter for json5 better json support

Plug

Plug 'ray-x/web-tools.nvim'

Setup

require'web-tools'.setup({
  keymaps = {
    rename = nil,  -- by default use same setup of lspconfig
    repeat_rename = '.', -- . to repeat
  },
  hurl = {  -- hurl default
    show_headers = false, -- do not show http headers
    floating = false,   -- use floating windows (need guihua.lua)
    json5 = false,      -- use json5 parser require json5 treesitter
    formatters = {  -- format the result by filetype
      json = { 'jq' },
      html = { 'prettier', '--parser', 'html' },
    },
  },
})

Commands

command	Description
BrowserSync {args}	run browser-sync server with args
BrowserOpen {args}	open browser-sync, if browser-sync is not start, start it with args
BrowserPreview {-f --port 3000}	preview current file with browser sync
BrowserRestart	restart browser sync
BrowserStop	stop browser sync
TagRename {newname}	rename html tag
HurlRun {args}	Run Hurl, when in Visual mode, run selected snippets
Npm {args}	Run npm, e.g. npm -i package-name
Yarn {args}	Run yarn, e.g. yarn add package-name
Pnpm {args}	Run pnpm, e.g. pnpm add package-name
Npx {args}	Run npx, e.g. npx add package-name
Node {args}	Run node, e.g. node script.js
JobStop {jobid}	Stop job by jobid, stop last unfinished job if jobid is nil

Note

{args} can be optional, if not provided, check command help, e.g. browser-sync for all args options --port: specify port to open, if BrowserPreview port is different from BrowserSync port, open without check browser-sync server