1. Introduction
  2. Editor Integration
  3. Common Configurations
  4. 1. Editor Frontends
    1. 1.1. VS Cod(e,ium)
    2. 1.2. Neovim
    3. 1.3. Emacs
    4. 1.4. Sublime Text
    5. 1.5. Helix
    6. 1.6. Zed
  5. Features
  6. 2. Command line interface
  7. 3. Code Documentation
  8. 4. Code Completion
  9. 5. Exporting Documents
  10. 6. Document Preview
  11. 7. Testing
  12. 8. Linting
  13. 9. Other Features
  14. Service Overview
  15. Overview of Service
  16. 10. Principles
  17. 11. Commands System
  18. 12. LSP Inputs
  19. 13. Type System
  20. Service Development
  21. 14. Crate Docs
  22. 15. LSP and CLI
  23. 16. Language Queries
  24. 17. Document Preview

Tinymist Docs

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.

#

PDF Preview

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

1
return {
2
  -- add tinymist to lspconfig
3
  {
4
    "neovim/nvim-lspconfig",
5
    opts = {
6
      servers = {
7
        tinymist = {
8
          settings = {
9
            exportPdf = "onType",
10
            outputPath = "$root/target/$dir/$name",
11
          }
12
        },
13
      },
14
    },
15
  },
16
}
1
return {
2
  -- add tinymist to lspconfig
3
  {
4
    "neovim/nvim-lspconfig",
5
    opts = {
6
      servers = {
7
        tinymist = {
8
          settings = {
9
            exportPdf = "onType",
10
            outputPath = "$root/target/$dir/$name",
11
          }
12
        },
13
      },
14
    },
15
  },
16
}

#

VSCode:

The corresponding configuration should be placed in the settings.json file. For example:

1
{
2
  "tinymist.exportPdf": "onType",
3
  "tinymist.outputPath": "$root/target/$dir/$name"
4
}
1
{
2
  "tinymist.exportPdf": "onType",
3
  "tinymist.outputPath": "$root/target/$dir/$name"
4
}

Also see:

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

#

Builtin Preview Feature

#

Using tinymist.startDefaultPreview Command (Since Tinymist v0.13.6)

You can use tinymist.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.args to override the default behavior. The default value is ["--data-plane-host=127.0.0.1:0", "--invert-colors=auto", "--open"]. Intentionally, the name of the configuration is not tinymist.defaultPreviewArgs or tinymist.preview.defaultArgs to avoid confusion.

#

Running preview server in background (Since Tinymist v0.13.6)

You can start a preview instance in background with configuration:

1
{
2
  "tinymist.preview.background.enabled": true,
3
}
1
{
2
  "tinymist.preview.background.enabled": true,
3
}

Default Behaviors:

  • The preview server listens on 127.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.args to override the default behavior. The default value is ["--data-plane-host=127.0.0.1:23635", "--invert-colors=auto"]. Example:

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

#

CLI Integration

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

is equivalent to

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

#

Editor Integration

#

VSCode:

The preview feature is integrated into the tinymist extension.

#

Neovim:

You may seek typst-preview.nvim for the preview feature.

#

Emacs:

You may seek typst-preview.el for the preview feature.

#

sys.inputs

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

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

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

1
#let version = preview-args.at("version", default: 0)
2
#if version <= 1 {
3
  assert(preview-args.at("theme", default: "light") in ("light", "dark"))
4
}
1
#let version = preview-args.at("version", default: 0)
2
#if version <= 1 {
3
  assert(preview-args.at("theme", default: "light") in ("light", "dark"))
4
}

#

Developer Guide

See Typst-Preview Developer Guide.

#
Theme-aware template

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

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