Skip to content
⚡️Blazing fast bbcode transforming and parsing tool in pure javascript, no dependencies
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: add logo image Oct 7, 2018
benchmark chore(benchmark): update benchmark resulting info Mar 29, 2019
.babelrc refactor(*): convert to babel and generation to lib, es, dist folders ( Sep 9, 2018
.eslintignore convert Parser class to set of function for better compression Jul 9, 2018
.eslintrc fix lint error, move helper methods to char and token files Jun 12, 2018
.gitignore chore: git ignore html5 benchmark files (#39) Jul 12, 2019
.npmrc feat(*): react render support, move some helper functions to plugin-h… Aug 9, 2018
.travis.yml feat(bbob): add codecov support to travis Jul 14, 2018 v2.5.4 (#51) Sep 25, 2019
LICENSE Initial commit Jun 4, 2018 docs: correct react preset usage (#29) Jun 29, 2019
commitlint.config.js chore: commit message linter Sep 23, 2018
lerna.json v2.5.4 (#51) Sep 25, 2019
package-lock.json chore(deps): bump handlebars from 4.1.2 to 4.5.3 (#53) Jan 7, 2020
package.json chore(bbob): add publish-patch npm command (#22) Jun 18, 2019
rollup.config.js style: remove redundant spaces Oct 7, 2018

BBob a BBCode processor

BBob is a tool to parse and transform BBCode written in pure javascript, no dependencies

Build Status codecov CodeFactor BCH compliance Known Vulnerabilities


Package Status Size Description
@bbob/core @bbob/core-status @bbob/core-size Core package
@bbob/react @bbob/react-status @bbob/react-size React renderer
@bbob/preset-react @bbob/preset-react-status @bbob/preset-react-size React default tags preset
@bbob/html @bbob/html-status @bbob/html-size HTML renderer
@bbob/preset-html5 @bbob/preset-html5-status @bbob/preset-html5-size HTML5 default tags preset

DEMO Playground

Table of contents

Basic usage

npm i @bbob/core @bbob/html @bbob/preset-html5
import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'

const processed = bbobHTML(`[i]Text[/i]`, presetHTML5())

console.log(processed); // <span style="font-style: italic;">Text</span>

React usage

npm i @bbob/react @bbob/preset-react
import React from 'react'
import {render} from 'react-dom'
import bbobReactRender from '@bbob/react/es/render'
import presetReact from '@bbob/preset-react'

console.log(render(<span>{bbobReactRender(`[i]Text[/i]`, presetReact(), { onlyAllowTags: ['i'] })}</span>)); // <span><span style="font-style: italic;">Text</span></span>


Its a way to transform parsed BBCode AST tree to another tree by rules in preset

Create your own preset

import { createPreset } from '@bbob/preset'

export default createPreset({
  quote: (node) => ({
    tag: 'blockquote',
    attrs: node.attrs,
    content: [{
      tag: 'p',
      attrs: {},
      content: node.content,

HTML Preset

Also you can use predefined preset for HTML

import html5Preset from '@bbob/preset-html5/es'
import { render } from '@bbob/html/es'
import bbob from '@bbob/core'

console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`, { render }).html) // <blockquote><p>Text</p></blockquote>

React Preset

Also you can use predefined preset for React

import reactPreset from "@bbob/preset-react";
import reactRender from "@bbob/react/es/render";

const preset = reactPreset.extend((tags, options) => ({
  quote: node => ({
    tag: "blockquote",
    content: node.content

const result = reactRender(`[quote]Text[/quote]`, reactPreset());

It produces a VDOM Nodes equal to
React.createElement('blockquote', 'Text')
document.getElementById("root").innerHTML = JSON.stringify(result, 4);

Edit lp7q9yj0lq

React usage


Or you can use React Component

import React from 'react'
import { render } from 'react-dom'

import BBCode from '@bbob/react/es/Component'
import reactPreset from '@bbob/preset-react/es'

const MyComponent = () => (
  <BBCode plugins={[reactPreset()]} options={{ onlyAllowTags: ['i'] }}>

render(<MyComponent />) // <div><blockquote><p>Text</p></blockquote></div>

Edit 306pzr9k5p

Render prop

Or pass result as render prop

import React from "react";
import { render } from 'react-dom'

import reactRender from '@bbob/react/es/render'
import reactPreset from '@bbob/preset-react/es'

const toReact = input => reactRender(input, reactPreset())

const text = toReact('[b]Super [i]easy[/i][/b] [u]to[/u] render')

const App = ({ renderProp }) => (

render(<App />) // <span><span style="font-weight: bold;">Super <span style="font-style: italic;">easy</span></span> <span style="text-decoration: underline;">to</span> render</span>

Edit x7w52lqmzz

PostHTML usage

Create Plugin

You can’t perform that action at this time.