This is the abridged developer documentation for Oicana # Installation and Setup > Install the Oicana CLI and set up an editor for template development with Typst. To get started, you need the Oicana CLI and an editor for Typst. Both are only necessary on machines used for Oicana template development. An end-user machine, running software that uses an Oicana integration, does not require any additional installations. ## Oicana CLI [Section titled “Oicana CLI”](#oicana-cli) Install a [prebuild binary from GitHub](https://github.com/oicana/oicana/releases/tag/oicana_cli-v0.6.0) or let a script do that for you. Bash script: Shell script to install Oicana CLI ```bash curl --proto '=https' --tlsv1.2 -LsSf https://github.com/oicana/oicana/releases/download/oicana_cli-v0.6.0/oicana_cli-installer.sh | sh ``` Powershell script: Powershell script to install Oicana CLI ```powershell -ExecutionPolicy Bypass -c "irm https://github.com/oicana/oicana/releases/download/oicana_cli-v0.6.0/oicana_cli-installer.ps1 | iex" ``` After the installation, run `oicana --version` to make sure the installation succeeded. The CLI can manage Oicana templates. The most relevant commands for this guide are `oicana pack` to package a template and `oicana compile` if you want to test template compilation. See the [CLI chapter](/docs/cli/) for more information. ## Editor for Typst [Section titled “Editor for Typst”](#editor-for-typst) You can edit Typst files in any text editor, but syntax highlighting and live previews make development significantly easier. Here are some suggestions: * Several IDEs have Typst plugins with live previews and syntax highlighting. * Visual Studio Code: [Tinymist](https://marketplace.visualstudio.com/items?itemName=myriad-dreamin.tinymist) offers a complete experience with live preview, syntax/error highlighting and more. * JetBrains IDEs: [Kvasir](https://plugins.jetbrains.com/plugin/25061-kvasir) * [Official Typst editor in the browser](https://typst.app/). * This editor has a [significant free tier and a pro tier for $8 per month](https://typst.app/pricing/). It is maintained by the Typst company. * Web based; No installation required. * You can work on the same document with multiple people and sync your templates to GitHub or GitLab. ## For this Guide [Section titled “For this Guide”](#for-this-guide) In the following chapters, you will create a basic Oicana template that can be used with any integration. After creating the template, you’ll be able to choose which integration to explore based on your preferred tech stack. # Create a Template > Create your first Oicana template with static content and package it. The simplest Oicana template consists of a `typst.toml` file and a Typst source file with some static content. The `oicana new` command scaffolds both for you in one step. ## Template with static content [Section titled “Template with static content”](#template-with-static-content) We will use the `new` command of the Oicana CLI to create a starter template. If you are using the online Typst editor, manually create the files and paste their content. ```bash oicana new example ``` This creates an `example/` directory with two files. Open it in your IDE with Typst support. main.typ ```typst #set document(date: datetime.today()) = Hello Edit `main.typ` to design your template. ``` The preview of `main.typ` should show the heading and text. The companion `example/typst.toml` is the template manifest: typst.toml ```toml [package] name = "example" version = "0.1.0" entrypoint = "main.typ" [tool.oicana] manifest_version = 1 ``` It gives our template the name `example`, the semantic version `0.1.0`, and defines the entrypoint as `main.typ`. The `tool.oicana` section only configures the Oicana manifest version for now. To check that the manifest is well-formed, run `oicana validate` in the template directory. It will report any issues with `typst.toml` before you try to package or compile the template. ## Packaging [Section titled “Packaging”](#packaging) To compile the template through Oicana integrations, like shown in later chapters of this guide, it has to be packaged. Navigate into the template directory in a terminal and execute `oicana pack`. This will create a file called `example-0.1.0.zip`. # Defining Inputs > Learn how to define JSON and blob inputs for your Oicana template. There are two types of inputs. A `json` input contains structured data while a `blob` input passes bytes and optionally metadata to the template. For example, in an invoice the items and customer data could be a `json` input and the company logo could be a `blob` input. ## The Oicana Typst package [Section titled “The Oicana Typst package”](#the-oicana-typst-package) Template inputs are configured in the manifest file `typst.toml`. The Oicana Typst package determines the current values of inputs. Add the following to the top of your `main.typ` file to initialize the package: Beginning of main.typ ```typst #import "@preview/oicana:0.2.0": setup #let read-project-file(path) = read(path, encoding: none) #let (input, oicana-image, oicana-config) = setup(read-project-file) #set document(date: datetime.today()) ``` The `setup` method reads the manifest file and resolves all inputs. It returns three values: 1. *input* - dictionary of resolved input values, keyed by input key 2. *oicana-image* - a utility method, that takes the key of a blob input and returns the input as an image 3. *oicana-config* - dictionary with compilation metadata We only need the inputs for now. You can take a look at [the example templates](https://github.com/oicana/oicana-example-templates) to see the `oicana-image` helper in action. ## Defining inputs [Section titled “Defining inputs”](#defining-inputs) We will use a `json` input to pass a name into the template. Add the following to the end of the `typst.toml` file: typst.toml ```toml [[tool.oicana.inputs]] type = "json" key = "info" ``` The value of this input is now available in the template as `input.info`, where `info` is the key of the input as defined in `typst.toml`. While we develop the template, the value of the input will be `none`, because there is no Oicana integration setting a value for it. We can change that by defining a `default` or `development` value for the input. ### Default and Development values [Section titled “Default and Development values”](#default-and-development-values) Inputs can define two different fallback values, `default` and `development`. These fallback values differ in priority based on which mode the template is compiled in. When compiling a template in development mode, input values have the priority 1. Explicit input value (for example through an integration) 2. `development` value 3. `default` value If you compile in production mode, the `development` value is ignored: 1. Explicit input value (for example through an integration) 2. `default` value While developing an Oicana template in a Typst editor, it will be compiled in development mode. It makes sense to define `development` values for all required inputs of your template to have a functioning preview. Let’s extend our input with a `development` value. First create an `info.json` file in the template directory: info.json ```json { "name": "Chuck Norris" } ``` Then extend the input definition and set the `development` value to be `info.json`: typst.toml ```toml [[tool.oicana.inputs]] type = "json" key = "info" development = "info.json" ``` In our template we can now use `input.info.name` and the preview will show “Chuck Norris”. Update your template to the following: main.typ ```typst #import "@preview/oicana:0.2.0": setup #let read-project-file(path) = read(path, encoding: none) #let (input, oicana-image, oicana-config) = setup(read-project-file) #set document(date: datetime.today()) = Hello from Typst, #input.info.name Now we can pass names into the template from any Oicana integration. ``` ## Compiling with the CLI [Section titled “Compiling with the CLI”](#compiling-with-the-cli) After changing the manifest, run `oicana validate` to confirm the new input definition is valid. If the JSON input has a schema, `validate` also checks that the `development` and `default` values match it. Running `oicana compile --development` should create a PDF file in an `output` directory. To set the input value from the CLI, copy `info.json` to `test-input.json` and change the name in the new file. Then run `oicana compile -j info=test-input.json` and the new PDF file in `output` will contain whatever name you configured. With the input defined in your template, you’re ready to choose an integration and learn how to pass dynamic values from your application code. In preparation for that, you should pack the template again using `oicana pack` to have the latest state of the template at hand. # Browser / React > Integrate Oicana into a React application using WebAssembly. In this chapter, you’ll integrate Oicana into a React application using WebAssembly. Unlike the server-side integrations, Oicana runs entirely in the browser here - no server required for PDF generation. Let’s start with a fresh React project using Vite. Run the following command: ```bash npm create vite@latest my-pdf-app -- --template react-ts cd my-pdf-app npm install ``` You can test it by running `npm run dev` and navigating to in your browser. ## Adding Oicana [Section titled “Adding Oicana”](#adding-oicana) Install the Oicana browser packages: ```bash npm install @oicana/browser @oicana/browser-wasm ``` 1. Create a `public` directory (if it doesn’t exist) and copy `example-0.1.0.zip` into it. This makes the template accessible to the browser. 2. Replace the contents of `src/App.tsx` with the following: src/App.tsx ```tsx import { useEffect, useState } from 'react'; import { initialize, Template, CompilationMode, Pdf } from '@oicana/browser'; import wasmUrl from '@oicana/browser-wasm/oicana_browser_wasm_bg.wasm?url'; function App() { const [template, setTemplate] = useState