Getting Started

Getting started with scaffdog is easy. We will show you how to install and start using scaffdog.


  • Node.js v16.0.0+


scaffdog can be installed globally, but we recommend installing it locally on the project.

$ npm install --save-dev scaffdog


scaffdog reads the documentation and configuration files in the .scaffdog directory by default. There are two ways to set these up.


The init subcommand is the easiest way to set up.

$ npx scaffdog init
? Please enter a document name. hello
Setup of scaffdog šŸ¶ is complete!
āœ” .scaffdog/config.js
āœ” .scaffdog/
Now you can do scaffold by running `$ scaffdog generate`.
Please refer to the following documents and customize it.

This completes the minimal setup. Easy!


In some cases, depending on the project, you may want to perform the setup manually. No need to worry, however. Manual setup is not a difficult task.

First, create a .scaffdog directory and a configuration file.

$ mkdir .scaffdog
$ touch .scaffdog/config.js

Open .scaffdog/config.js with an editor and write the following:

export default {
files: ['*'],

Documentation does not yet exist, but this completes the minimal setup.

Basic Usage#

In the previous section, we have the environment we need to use scaffdog!
Let's define a little practical documentation and actually generate the files.

Write your first template#

Let's take a React project as an example for documentation.

Create the .scaffdog/ file and edit it as follows:

name: 'component'
root: '.'
output: '.'
name: 'Please enter a component name.'
confirm: 'Do you need a story?'
initial: true
# `{{ | pascal }}/index.ts`
export * from './{{ }}';
# `{{ | pascal }}/{{ | pascal }}.tsx`
export type Props = React.PropsWithChildren<{}>;
export const {{ | pascal }}: React.FC<Props> = ({ children }) => {
return <div>{children}</div>;
# `{{ !inputs.story && '!' }}{{ | pascal }}/{{ | pascal }}.stories.tsx`
import { {{ | pascal }} } from './{{ | pascal }}';
export default { component: {{ | pascal }} };
export const Overview = { args: {} };

Several sections appeared in the Markdown file. The title of <h1 /> corresponds to the file name, and the code block that follows corresponds to the contents of the file.

In this example, three files would be generated!

Run generate subcommand#

Now let's actually generate a file from this document. Run the generate subcommand.

$ npx scaffdog generate
? Please select a document. component
ā„¹ Output destination directory: "."
? Please enter a component name. Button
? Do you need a story? Yes
šŸ¶ Generated 3 files!
āœ” Button/index.ts
āœ” Button/Button.tsx
āœ” Button/Button.stories.tsx

Entering the value Button in interactive prompt resulted in three files being generated šŸŽ‰

The contents of each generated file are as follows:

// Button/index.ts
export * from './Button';
// Button/Button.ts
export type Props = React.PropsWithChildren<{}>;
export const Button: React.FC<Props> = ({ children }) => {
return <div>{children}</div>;
// Button/Button.stories.ts
import { Button } from './Button';
export default { component: Button };
export const Overview = { args: {} };

We were able to scaffold with only one Markdown file šŸ•

Next, read the template documentation and feel free to build whatever template you need for your project.

Edit this page on GitHub

Last edited on

Copyright Ā© 2022 wadackel

Released under the MIT License

Built with Next.js

Source Code