Skip to content
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.
demo fix: "@hideconstructor" Jul 31, 2017
static fix: Collapsibles, Tab-names Jan 21, 2017
tmpl fix: "@hideconstructor" Jul 31, 2017
.editorconfig Add .editorconfig and .gitattributes Nov 11, 2016
.gitignore feat: initial commit - v1.0.0 Nov 7, 2016
LICENSE feat: initial commit - v1.0.0 Nov 7, 2016 fix typo Nov 23, 2018
gulpfile.js feat: "useCollapsibles" option (#23) Jan 15, 2017
package.json 1.2.2 Jul 31, 2017
publish.js Revert "Fix issue #29 - Problem on fs.copyFileSync when publishing fi… Sep 22, 2017

TUI JSDoc Template

Toast UI JSDoc template



npm i -D tui-jsdoc-template


TUI JSDoc template has the following features:

  • Navigation:
    • AutoComplete Searchbox
    • Collapsible
    • Members / Methods / Events
    • API / Examples (Tutorials) switcher
    • Resizable
  • Examples: HTML/JS source tab in example pages



(jsdoc page - configuration)


"opts": {
    "template": "node_modules/tui-jsdoc-template"


"templates": {
    "logo": {
        "url": "",
        "width": "150px",
        "height": "13px",
        "link": ""

Page title

"templates": {
    "name": "Tui JSDoc Template"

Footer text

"templates": {
    "footerText": "My awesome footer text"

Use collapsible api list

Default: true

"templates": {
    "useCollapsibles": true

Tab Names

"templates": {
    "tabNames": {
        "api": "API",
        "tutorials": "Examples"

api defaults to the value API and tutorials defaults to the value Examples.

Custom Styles

With a folder structure like this:

└── styles
    └── custom.css
    └── another.css

And a config like this:

"templates": {
    "default": {
        "staticFiles": {
            "include": ["static/"]
    "css": [

styles/custom.css, styles/another.css, and remote.css get included in the layout. default.staticFiles is the build-in jsdoc way of copying extra files.

Expose the html/js code to example page

If script or div elements have code-js or code-html class, expose their innerHTML.

  1. innerHTML of script.code-js tag
  2. innerHTML of div.code-html tag
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <div class="code-html">
        <h3> Base Example </h3>
        <p> Hello world </p>

    <script class="code-js">
        console.log('hello world');


  1. Use npm run serve or gulp serve command to ascertain realtime.
  2. Api-Example tab, Auto-Complete and Resize functions are written in the static/scripts/tui-doc.js file.
You can’t perform that action at this time.