Skip to content
Marcos Cáceres edited this page May 13, 2021 · 17 revisions

Creating Static Snapshots

Open the ReSpec UI and select "Export...".

Screen shot of ReSpec UI

Select the format to export as.

ReSpec's supports various export formats

Using command line

One off (downloads about 100mb)...

npx respec --src source.html --out index.html

Or, to install ReSpec for repeated use:

npm install --global respec

And then:

respec --src source.html --out index.html

For more options, run respec --help.

  Description
    Converts a ReSpec source file to HTML and writes to destination.

  Usage
    $ respec [source] [destination] [options]

  Options
    -s, --src            URL to ReSpec source file.
    -o, --out            Path to output file.
    -t, --timeout        How long to wait before timing out (in seconds).  (default 10)
    --use-local          Use locally installed ReSpec instead of the one in document.  (default false)
    -e, --haltonerror    Abort if the spec has any errors.  (default false)
    -w, --haltonwarn     Abort if ReSpec generates warnings.  (default false)
    --disable-sandbox    Disable Chromium sandboxing if needed.  (default false)
    --devtools           Enable debugging and show Chrome's DevTools.  (default false)
    --verbose            Log processing status to stdout.  (default false)
    --localhost          Spin up a local server to perform processing.  (default false)
    --port               Port override for --localhost.  (default 3000)
    -v, --version        Displays current version
    -h, --help           Displays this message
If you already have Chrome installed on your computer, you can speed up the process by not installing a new copy of Chrome on each install. To do so, add following two environment variables before installing or running above steps:
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
export PUPPETEER_EXECUTABLE_PATH="/usr/bin/google-chrome"
# replace "/usr/bin/google-chrome" with path to Chrome executable on your system.
# On MacOS, it's generally:
# "/Applications/Google Chrome.app/Contents/MacOS/Google chrome"

Guides

Configuration options

W3C Configuration options

Linter rules

Internal properties

Handled by ReSpec for you.

Special <section> IDs

HTML elements

Custom Elements

WebIDL

HTML attributes

CSS Classes

Special properties

Clone this wiki locally