shoty

animated and static element screenshots

npm i shoty -g

pnpm add shoty -g

yarn global add shoty

CLI

Examples

# node

# view source

example/node.ts

import { Options, run } from 'shoty'

run(
  new Options({
    file: 'web.ts',
    root: __dirname,
  })
).then(() => console.log('complete'))

# web

# view source

example/web.ts

document.body.innerHTML = `<h1 id="demo">hello world!</h1>`

API

# Options

src/vite-open/dist/types/index.d.ts#L8

# constructor()

# new Options()

Options

# debugging

src/vite-open/dist/types/index.d.ts#L15

string

# debuggingThis

src/vite-open/dist/types/index.d.ts#L16

boolean

# file

src/vite-open/dist/types/index.d.ts#L9

string

# https

src/vite-open/dist/types/index.d.ts#L11

boolean

# jsx

src/vite-open/dist/types/index.d.ts#L12

string

# log

src/vite-open/dist/types/index.d.ts#L18

# (args)

# args

unknown []

(args)  =>

void

# noForce

src/vite-open/dist/types/index.d.ts#L14

boolean

# noOpen

src/vite-open/dist/types/index.d.ts#L13

boolean

# quiet

src/vite-open/dist/types/index.d.ts#L17

boolean

# responses

src/vite-open/dist/types/index.d.ts#L20

Record<string, {

# content

src/vite-open/dist/types/index.d.ts#L22

string

# type

src/vite-open/dist/types/index.d.ts#L21

string

# fn(server, req, res, next)

src/vite-open/dist/types/index.d.ts#L23

# server

ViteDevServer

# req

IncomingMessage

# res

ServerResponse

# next

NextFunction

fn(server, req, res, next)  =>

void

}>

# root

src/vite-open/dist/types/index.d.ts#L10

string

# virtual

src/vite-open/dist/types/index.d.ts#L19

Record<string, any>

# viteOptions

src/vite-open/dist/types/index.d.ts#L25

Partial<InlineConfig>

# Options

src/runner.ts#L8

# constructor(options)

src/runner.ts#L37

# new Options()

Options

# options  =  {}

Partial<Options>

# command  =  []

src/runner.ts#L11

string []

# delay  =  0

src/runner.ts#L17

number

# file  =  ''

src/runner.ts#L9

string

# fontFamily  =  'Ubuntu Mono'

src/runner.ts#L27

string

# fontSize  =  14

src/runner.ts#L29

number

# height  =  600

src/runner.ts#L23

number

# https  =  false

src/runner.ts#L35

boolean

# length  =  1

src/runner.ts#L19

number

# lineHeight  =  1.1

src/runner.ts#L31

number

# outfile  =  ''

src/runner.ts#L13

string

# pixelRatio  =  2

src/runner.ts#L25

number

# root  =  '.'

src/runner.ts#L33

string

# selector  =  '#demo'

src/runner.ts#L15

string

# width  =  800

src/runner.ts#L21

number

# AnimationOptions

src/take-animation.ts#L7

Partial<ViteOpenOptions> & {

# delay

src/take-animation.ts#L8

number

# height

src/take-animation.ts#L9

number

# length

src/take-animation.ts#L10

number

# outfile

src/take-animation.ts#L11

string

# pixelRatio

src/take-animation.ts#L12

number

# selector

src/take-animation.ts#L13

string

# width

src/take-animation.ts#L14

number

}

# CliScreenshotOptions

src/take-cli-screenshot.ts#L6

{

# command

src/take-cli-screenshot.ts#L9

string []

# fontFamily

src/take-cli-screenshot.ts#L11

string

# fontSize

src/take-cli-screenshot.ts#L12

number

# lineHeight

src/take-cli-screenshot.ts#L13

number

# outfile

src/take-cli-screenshot.ts#L7

string

# pixelRatio

src/take-cli-screenshot.ts#L10

number

# root

src/take-cli-screenshot.ts#L8

string

}

# ScreenshotOptions

src/take-screenshot.ts#L7

Partial<ViteOpenOptions> & {

# delay

src/take-screenshot.ts#L8

number

# height

src/take-screenshot.ts#L9

number

# outfile

src/take-screenshot.ts#L10

string

# pixelRatio

src/take-screenshot.ts#L11

number

# selector

src/take-screenshot.ts#L12

string

# width

src/take-screenshot.ts#L13

number

}

# run(options)

src/runner.ts#L42

# options

Options

run(options)  =>

Promise<void>

# takeAnimation(options)

src/take-animation.ts#L17

# options

AnimationOptions

takeAnimation(options)  =>

Promise<any>

# takeCliScreenshot(options)

src/take-cli-screenshot.ts#L16

# options

CliScreenshotOptions

takeCliScreenshot(options)  =>

Promise<void>

# takeScreenshot(options)

src/take-screenshot.ts#L16

# options

ScreenshotOptions

takeScreenshot(options)  =>

Promise<any>

Credits

• @stagas/terminal-screenshot by stagas – Render terminal ANSI output into images!
• @stagas/timecut by stagas – Record smooth movies of web pages
• decarg by stagas – decorator based cli arguments parser
• puppeteer by The Chromium Authors – A high-level API to control headless Chrome over the DevTools Protocol
• puppeteer-pretty-console by stagas – helper that setups console output for puppeteer
• vite by Evan You – Native-ESM powered web dev build tool
• vite-open by stagas – Open any file directly in a Vite dev server.

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas