Skip to content
Switch branches/tags


The React syntax highlighting and indenting plugin for vim. Also supports the typescript tsx file.


  • 📦 Support JSX highlighting and indenting out of the box. No dependencies.
  • 💯 Fully implemented the JSX syntax specification.
  • Support React syntax highlighting and indenting for JSX and typescript TSX files.
  • 🏷 Support JSX syntax highlighting and indenting inside the tagged template string.
  • 🎨 Support highlighting the close tag separately from the open tag (set let g:vim_jsx_pretty_highlight_close_tag = 1 in your vimrc).
  • 💪 Many more corner test cases covered.
  • 💅 Reasonable syntax highlight groups, easy for customization.



(add colorful config)
vim-jsx-pretty colorful vim-jsx-pretty

Auto indent

Auto indent demo

Support typescript

typescript demo



your ~/.vimrc:

  • No dependencies

    Plug 'maxmellon/vim-jsx-pretty'
  • with: yuezk/vim-js (Recommended but not required)

    Plug 'yuezk/vim-js'
    Plug 'maxmellon/vim-jsx-pretty'
  • if you want to highlight tsx files.

    Plug 'HerringtonDarkholme/yats.vim'
    " or Plug 'leafgarland/typescript-vim'
    Plug 'maxmellon/vim-jsx-pretty'
  • Execute command in vim:

    :so ~/.vimrc

Using Vim8's package manager

mkdir -p ~/.vim/pack/vim-jsx-pretty/start
cd $_
git clone

For Neovim

mkdir -p ~/.local/share/nvim/site/vim-jsx-pretty/start
cd $_
git clone

⚠️ Work with vim-polyglot

Since vim-polyglot has already embedded this plugin, if you have installed vim-polyglot, you don't need to install this plugin anymore. But the bugfix for this plugin may not ship in vim-polyglot in time.

If you still want to use this plugin, make sure that you put this plugin ahead of vim-polyglot, and add let g:polyglot_disabled = ['jsx'] to your vimrc.

Syntax group list

name place
jsxElement <tag id="sample">text</tag>
jsxTag <tag id="sample">
jsxTagName <tag id="sample">
jsxComponentName <Capitals>
jsxAttrib <tag id="sample">
jsxEqual <tag id="sample">
jsxString <tag id="sample">
jsxCloseTag </tag>
jsxCloseString <tag />
jsxDot <Parent.Child>
jsxNamespace <foo:bar>
jsxPunct <tag></tag>


name default description
g:vim_jsx_pretty_disable_js 0 Disable the syntax highlighting for js files
g:vim_jsx_pretty_disable_tsx 0 Disable the syntax highlighting for tsx files
g:vim_jsx_pretty_template_tags ['html', 'jsx'] highlight JSX inside the tagged template string, set it to [] to disable this feature
g:vim_jsx_pretty_highlight_close_tag 0 highlight the close tag separately from the open tag
g:vim_jsx_pretty_colorful_config 0 colorful config flag

Colorful style (vim-javascript only)

let g:vim_jsx_pretty_colorful_config = 1 " default 0