Fepper will run perfectly well out-of-the-box with default configurations. For further customization, power-users can edit these files:

Edit conf.yml to suit the needs of your development environment. If using Git, conf.yml will not be version controlled by default.

Edit pref.yml to customize Fepper preferences. If you wish to use the fp syncback, fp frontend-copy, or fp template tasks, you must supply values for the backend.synced_dirs preferences in order for those directories to get processed and copied to the backend.

Edit patternlab-config.json to configure Pattern Lab, the design system behind the Fepper UI.



The port at which Fepper's webserver listens.

type: number
default: 3000

The port at which LiveReload listens for changes to the file system.

type: number
default: 35729

If true, this will ensure only one Fepper instance is running. Stale instances lingering into a fresh launch will be killed. However, if you wish to run multiple Fepper instances, you'll need to set this to false.

type: boolean
default: true

The relative path to the Fepper NPM.

type: string
default: node_modules/fepper

The relative path to the extensions directory.

type: string
default: extend



The relative path to the backend directory.

type: string
default: backend

The relative path to where assets (images, videos, etc.) should be copied to in the backend.

type: string

The relative path to where scripts (usually JavaScripts) should be copied to in the backend.

type: string

The relative path to where stylesheets should be copied to in the backend.

type: string

The relative path to where Fepper should output compiled backend templates.

type: string

The extension that should be appended to compiled backend template filenames.

type: string

An array of relative paths to backend directories to be served by Fepper's webserver.

type: array

By default, the Templater will not retain untranslated Feplet tags when translating to the backend's template language. However, if the backend's template language happens to be Feplet or Mustache, set this value to true.

type: boolean
default: false

Declares the class which defines the Fepper instance for a project. If you wish to customize a subclass that inherits from the default class, put the relative path to that file here.

type: string
default: node_modules/fepper/core/fepper.js

Fepper's human language for end-users. Fepper will translate according to the .json file at source/_ui/i18n identified by this pref.

type: string
default: en



Relative paths to source and public directories. Edits to source files will be built to the public directory and served from there.

type: object
"paths": {
  "source": {
    "root": "source",
    "annotations": "source/_annotations",
    "css": "source/_styles",
    "cssSrc": "source/_styles/src",
    "cssBld": "source/_styles/bld",
    "fonts": "source/_styles/bld/fonts",
    "data": "source/_data",
    "images": "source/_assets",
    "imagesSrc": "source/_assets/src",
    "imagesBld": "source/_assets/bld",
    "js": "source/_scripts",
    "jsSrc": "source/_scripts/src",
    "jsBld": "source/_scripts/bld",
    "meta": "source/_meta",
    "patterns": "source/_patterns",
    "templates": "source/_patterns/03-templates",
    "pages": "source/_patterns/04-pages",
    "scrape": "source/_patterns/98-scrape",
    "static": "source/_static",
    "ui": "source/_ui"
  "public": {
    "root": "public",
    "annotations": "public/annotations",
    "css": "public/_styles",
    "cssBld": "public/_styles/bld",
    "fonts": "public/_styles/bld/fonts",
    "images": "public/_assets",
    "js": "public/_scripts",
    "patterns": "public/patterns",
    "static": "public/static"

Whether or not to append a unique query string to cacheable assets, e.g. JS, CSS. If true, the browser will pick up recent changes and not retrieve from cache.

type: boolean
default: true

Whether or not to delete the files in public/patterns on each build.

type: boolean
default: true

Whether or not to output all debugging messages in the console.

type: boolean
default: false

The pattern that will be displayed on launch.

type: string
default: pages-homepage

Whether or not to launch with the Code Viewer open.

type: boolean
default: false

The file extension for annotation files, syntaxed in a superset of Front Matter, a superset comprising YAML and Markdown.

type: string
default: .md

Whether or not to hash patterns per build. Setting this to true will improve build performance by skipping unchanged patterns.

type: boolean
default: true

Whether or not to hide UI toolbar items.

type: object
"ishControlsHide": {
  "disco": true,
  "find": false,
  "grow": false,
  "random": true,
  "views-all": false,
  "views-annotations": false,
  "views-code": false,
  "views-new": false,
  "tools-all": false,
  "tools-docs": false,
  "tools-shortcuts": false

The minimum viewport width the UI will render.

type: number
default: 240

The maximum viewport width the UI will render.

type: number
default: 2600

The relative path to the directory that patterns will be exported to if patternExportPatternPartials has items.

type: string
default: pattern_exports

Patterns to be exported per build. The exported patterns will include their built partials and their data. They will be snippets of HTML, not full HTML pages.

type: array
default: []

The file extension for patterns. Fepper uses Feplet, a superset of Mustache. While it is debatable whether this is still truly Mustache, the naming convention persists.

type: string
default: .mustache

Sets which patterns will be excluded from navigation and display in the UI. These patterns can still be included as partials in other patterns.

type: array
default: []