Create beautiful and simple HTML pages from your files

  • πŸ›  No config
  • πŸ‘©β€πŸ’» Code Highlighting
  • πŸ’―Emoji Support
  • ✨Creates Static files (only JS is prism)
  • πŸ³οΈβ€πŸŒˆ Pretty Pages
  • πŸ¦„ Customizable
  • πŸ–Ό Image minification
  • πŸ‡³πŸ‡± CodeSandbox and iframe Support
yarn add fiddly --dev
npm install fiddly --save-dev


  "scripts": {
    "build:demo": "fiddly",

Deploy automatically to netlify πŸŽ‰

This Readme on Netlify

This Readme with white theme

Usage with npx

If you just want a quick fancy HTML page from the Readme but don't care about running this in continuous deployment you can also use npx to run it as a one time thing.

  npx fiddly

By running this in the root folder you will also get a public folder


Options are placed in a .fiddly.config.json or as a fiddly key in package.json. It can contain the following options:

Option Default Description
file,, or Your name
name name in package.json The project name that is in the title and the header
logo '' The project logo that is in the header
description description in package.json The project description for meta tags
homepage null The project homepage for meta tags
noHeader false Show no header and just the markdown content
darkTheme false Dark theme ofc πŸŽ‰
favicon '' Favicon url or local path
dist public To what folder to render your HTML
styles {} Styles to apply to the page. Object or path to css/scss file
additionalFiles [] Any other pages to create. It expects an array of paths of markdown files
repo null Link to point the github corner
pathPrefix Environment var PATH_PREFIX or '/' Host your fiddly files at e.g. /my-fiddly-project
deployment {} Deployment options for github pages. Accepts all options here

Example of styles

For styles you can either use a style object like so and that will override the default styles applied. Like so:

  "styles": {
    "h1": {
      "color": "blue",
      "backgroundColor": "red"

Another option is to give the path to a local css or scss file. In this case you need to override any specificity issues. You can by using the #fiddly id. Example:

body {
  background: #fff;

#fiddly {
  h1 {
    text-transform: uppercase;


Any images linked in your markdown that are local will be minified and copied to your dist folder. If some image is not found it will be ignored.

Github Corner

The Github corner comes from either the repo option in your .fiddly.config.json or from the repository url in your package.json. If none is present it will not be shown.


Fiddly also exports a command to let you lint all the markdown files you specified.

You can run this by using the lint command

"lint:md" : "fiddly lint"


Fiddly also exports a command to let you deploy your new site to Github pages

You can run this by using the deploy command

"deploy" : "fiddly deploy"

Options for this can be passed in a deployment key in your config file. All options can be found here:



Sara Vieira

πŸ’» 🎨 πŸ€”

Bruno Scheufler


Siddharth Kshetrapal


Jamon Holmgren




Andrew Cherniavskii