Preview Feature

Two ways of previewing a Typst document are provided:

• PDF Preview: let lsp export your PDF on typed, and open related PDF by your favorite PDF viewer.
• Web (SVG) Preview: use builtin preview feature.

Whenever you can get a web preview feature, it is recommended since it is much faster than PDF preview and provides bidirectional navigation feature, allowing jumping between the source code and the preview by clicking or lsp commands.

For non-vscode clients, Neovim client as an example. One who uses nvim-lspconfignvim-lspconfig can place their configuration in the servers.tinymist.settingsservers.tinymist.settings section. If you want to export PDF on typing and output files in $root_dir/target$root_dir/target directory, please configure it like that:

return {

  -- add tinymist to lspconfig

  {

    "neovim/nvim-lspconfig",

    opts = {

      servers = {

        tinymist = {

          settings = {

            exportPdf = "onType",

            outputPath = "$root/target/$dir/$name",

          }

        },

      },

    },

  },

}

return {

  -- add tinymist to lspconfig

  {

    "neovim/nvim-lspconfig",

    opts = {

      servers = {

        tinymist = {

          settings = {

            exportPdf = "onType",

            outputPath = "$root/target/$dir/$name",

          }

        },

      },

    },

  },

}

return {

  -- add tinymist to lspconfig

  {

    "neovim/nvim-lspconfig",

    opts = {

      servers = {

        tinymist = {

          settings = {

            exportPdf = "onType",

            outputPath = "$root/target/$dir/$name",

          }

        },

      },

    },

  },

}

return {

  -- add tinymist to lspconfig

  {

    "neovim/nvim-lspconfig",

    opts = {

      servers = {

        tinymist = {

          settings = {

            exportPdf = "onType",

            outputPath = "$root/target/$dir/$name",

          }

        },

      },

    },

  },

}

{

  "tinymist.exportPdf": "onType",

  "tinymist.outputPath": "$root/target/$dir/$name"

}

{

  "tinymist.exportPdf": "onType",

  "tinymist.outputPath": "$root/target/$dir/$name"

}

{

  "tinymist.exportPdf": "onType",

  "tinymist.outputPath": "$root/target/$dir/$name"

}

{

  "tinymist.exportPdf": "onType",

  "tinymist.outputPath": "$root/target/$dir/$name"

}

Also see:

• VS Cod(e,ium): Tinymist Server Configuration
• Neovim: Tinymist Server Configuration

You can use tinymist.startDefaultPreviewtinymist.startDefaultPreview command to start a preview instance without arguments. This is used for the case where a client cannot pass arguments to the preview command, e.g. helix. Default Behaviors:

• The preview server listens on a random port.
• The colors are inverted according to the browser (usually also system) settings.
• The preview follows an inferred focused file from the requests from the client.
• The preview is opened in the default browser.

You can set the arguments to used by configuration tinymist.preview.browsing.argstinymist.preview.browsing.args to override the default behavior. The default value is ["--data-plane-host=127.0.0.1:0", "--invert-colors=auto", "--open"]["--data-plane-host=127.0.0.1:0", "--invert-colors=auto", "--open"]. Intentionally, the name of the configuration is not tinymist.defaultPreviewArgstinymist.defaultPreviewArgs or tinymist.preview.defaultArgstinymist.preview.defaultArgs to avoid confusion.

You can start a preview instance in background with configuration:

{

  "tinymist.preview.background.enabled": true,

}

{

  "tinymist.preview.background.enabled": true,

}

{

  "tinymist.preview.background.enabled": true,

}

{

  "tinymist.preview.background.enabled": true,

}

Default Behaviors:

• The preview server listens on 127.0.0.1:23635127.0.0.1:23635.
• The colors are inverted according to the browser (usually also system) settings.
• The preview follows an inferred focused file from the requests from the client.

You can set the arguments to used by configuration tinymist.preview.background.argstinymist.preview.background.args to override the default behavior. The default value is ["--data-plane-host=127.0.0.1:23635", "--invert-colors=auto"]["--data-plane-host=127.0.0.1:23635", "--invert-colors=auto"]. Example:

{

  "tinymist.preview.background.args": ["--data-plane-host=127.0.0.1:23635", "--invert-colors=never"],

}

{

  "tinymist.preview.background.args": ["--data-plane-host=127.0.0.1:23635", "--invert-colors=never"],

}

{

  "tinymist.preview.background.args": ["--data-plane-host=127.0.0.1:23635", "--invert-colors=never"],

}

{

  "tinymist.preview.background.args": ["--data-plane-host=127.0.0.1:23635", "--invert-colors=never"],

}

typst-preview /abs-path/to/main.typ --partial-rendering

typst-preview /abs-path/to/main.typ --partial-rendering

typst-preview /abs-path/to/main.typ --partial-rendering

typst-preview /abs-path/to/main.typ --partial-rendering

is equivalent to

tinymist preview /abs-path/to/main.typ --partial-rendering

tinymist preview /abs-path/to/main.typ --partial-rendering

tinymist preview /abs-path/to/main.typ --partial-rendering

tinymist preview /abs-path/to/main.typ --partial-rendering

If the document is compiled by lsp, you can use sys.inputssys.inputs to get the preview arguments:

#let preview-args = json.decode(sys.inputs.at("x-preview", default: "{}"))

#let preview-args = json.decode(sys.inputs.at("x-preview", default: "{}"))

#let preview-args = json.decode(sys.inputs.at("x-preview", default: "{}"))

#let preview-args = json.decode(sys.inputs.at("x-preview", default: "{}"))

There is a versionversion field in the preview-argspreview-args object, which will increase when the scheme of the preview arguments is changed.

#let version = preview-args.at("version", default: 0)

#if version <= 1 {

  assert(preview-args.at("theme", default: "light") in ("light", "dark"))

}

#let version = preview-args.at("version", default: 0)

#if version <= 1 {

  assert(preview-args.at("theme", default: "light") in ("light", "dark"))

}

#let version = preview-args.at("version", default: 0)

#if version <= 1 {

  assert(preview-args.at("theme", default: "light") in ("light", "dark"))

}

#let version = preview-args.at("version", default: 0)

#if version <= 1 {

  assert(preview-args.at("theme", default: "light") in ("light", "dark"))

}

See Typst-Preview Developer Guide.

The only two abstracted theme kinds are supported: lightlight and darkdark. You can use the following code to get the theme:

#let preview-theme = preview-args.at("theme", default: "light")

#let preview-theme = preview-args.at("theme", default: "light")

#let preview-theme = preview-args.at("theme", default: "light")

#let preview-theme = preview-args.at("theme", default: "light")