Transform Markdown(and other static files with transformers) into a SPA website using React.
Alternatives To Bisheng
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Docz23,3866861,4772 months ago275February 11, 2022110mitTypeScript
✍ It has never been so easy to document your things!
Semantic Ui React13,1278,4651,2562 days ago155February 28, 2023196mitJavaScript
The official Semantic-UI-React integration
Nextra9,30379a day ago186October 24, 2023273mitTypeScript
Simple, powerful and flexible site generation framework with everything you love from Next.js.
React Toolbox8,7051,3101372 years ago66June 02, 2018267mitJavaScript
A set of React components implementing Google's Material Design specification with the power of CSS Modules
Rebass7,9147443824 months ago109October 28, 201998mitJavaScript
:atom_symbol: React primitive UI components built with styled-system.
Semi Design7,45137a day ago302November 28, 2023144otherTypeScript
🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click
React Quill6,238777691a day ago49August 03, 2022335mitJavaScript
A Quill component for React.
Theme Ui5,138331935a day ago489September 26, 202371mitTypeScript
Build consistent, themeable React apps based on constraint-based design principles
Next4,491659,9977 hours ago493November 23, 2023550mitJavaScript
🦍 A configurable component library for web built on React.
Playroom4,38211748 days ago106November 23, 202352mitTypeScript
Design with JSX, powered by your own component library.
Alternatives To Bisheng
Select To Compare

Alternative Project Comparisons

Bi Sheng

Build status npm package NPM downloads Dependency Status

Bi Sheng was the Chinese inventor of the first known movable type technology.

bisheng is designed to transform Markdown(and other static files with transformers) into static websites and blogs using React.

Sites built with BiSheng

You can create a PR to extend this list with your amazing website which is built with BiSheng.


bisheng is based on dora & webpack & React & react-router, and it has the following features:

Big picture

Big picture of BiSheng




npm install --save-dev bisheng

Then, add start to npm scripts:

  "scripts": {
    "start": "bisheng start"

Create bisheng.config.js, otherwise bisheng will use the default config:

module.exports = {
  source: './posts',
  output: './_site',
  theme: './_theme',
  port: 8000,

Note: please make sure that source and theme exists, and theme should not be an empty directory. Just use bisheng-theme-one, if you don't know how to develop a theme. See a simple demo here.

Now, just run npm start.



We can install bisheng as a cli command and explore what it can do by bisheng -h. However, the recommended way to use bisheng is to install it as devDependencies.

$ npm install -g bisheng
$ bisheng -h
  Usage: bisheng [command] [options]


    start [options]     to start a server
    build [options]     to build and write static files to `config.output`
    gh-pages [options]  to deploy website to gh-pages
    help [cmd]          display help for [cmd]


    -h, --help     output usage information
    -V, --version  output the version number


bisheng will read bisheng.config.js as its config file, but we can set the config file name by --config, something like this bisheng --config another.config.js.

The content of bisheng.config.js looks like this:

module.exports = {
  port: 8000,
  source: './posts',
  output: './_site',
  theme: './_theme',
  htmlTemplate: path.join(__dirname, '../template.html'),
  devServerConfig: {},
  webpackConfig(config) {
    return config;
  hash: false,

  entryName: 'index',
  root: '/',

port: Number

default: 8000

To set the port which will be listened when we start a local server.

source: String | Array[String] | Object{ [category]: String | Array[String]}

default: './posts'

To set directory/directories where we place Markdown files.

And all the Markdown files in source will be parsed and then structured as a tree data, for example:

└── dir1

Will output a Markdown data tree:

  dir1: {
    a: {...},
    b: {...},

And each Markdown file will be parsed as a Markdown data. Actually, a Markdown data is the returned value of mark-twain, and it could be preprocessed by plugins.

exclude: RegExp

default: null

If you want to exclude some files in your source, just use exclude. Then bisheng will not parse files which match exclude.

output: String

default: './_site'

To set directory where bisheng will generate (HTML & CSS & JavaScript) files to.

theme: String

default: './_theme'

To set directory where we put the theme of website, and it also can be a npm package name.

More about theme.

themeConfig: any


A set of configuration that your theme provides, and then your theme can read it from props.themeConfig.

Note: themeConfig will be JSON.stringify before it's passed to props, so you cannot pass function/RegExp through themeConfig.

htmlTemplate: String

default: bisheng/lib/template.html

The HTML template which will be use to generate HTML files which will be sent to users.

Note: template will be parsed by nunjucks, and you can use the following variables in this template:

htmlTemplateExtraData: Object

default: {}

The Extra Data which will be used to render htmlTemplate.

devServerConfig: Object

default: {}

You can consult webpack-dev-server's documentation.

postcssConfig: Object

default: {
    plugins: [
        browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],

You can consult webpack postcss-loader's documentation.

webpackConfig: (config) => config

default: (config) => config

To modify the webpack config, you can extend the config like this.

transformers: Object[]

[{ test: /.md$/, use: MarkdownTransformer }]

A list of transformers that will be used to transform static files.

entryName: String

default: 'index'

The name of files which will be generated by webpack, such as [entryName].js & [entryName].css.

root: String

default: '/'

If the website will be deployed under a sub-directory of a domain (something like, we must set it (such as /bisheng-theme-one/).



Popular Reactjs Projects
Popular Theme Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Ant Design