Git Product home page Git Product logo

webapp-issues's Introduction

Typst

Documentation Typst App Discord Server Apache-2 License Jobs at Typst

Typst is a new markup-based typesetting system that is designed to be as powerful as LaTeX while being much easier to learn and use. Typst has:

  • Built-in markup for the most common formatting tasks
  • Flexible functions for everything else
  • A tightly integrated scripting system
  • Math typesetting, bibliography management, and more
  • Fast compile times thanks to incremental compilation
  • Friendly error messages in case something goes wrong

This repository contains the Typst compiler and its CLI, which is everything you need to compile Typst documents locally. For the best writing experience, consider signing up to our collaborative online editor for free. It is currently in public beta.

Example

A gentle introduction to Typst is available in our documentation. However, if you want to see the power of Typst encapsulated in one image, here it is:

Example

Let's dissect what's going on:

  • We use set rules to configure element properties like the size of pages or the numbering of headings. By setting the page height to auto, it scales to fit the content. Set rules accommodate the most common configurations. If you need full control, you can also use show rules to completely redefine the appearance of an element.

  • We insert a heading with the = Heading syntax. One equals sign creates a top level heading, two create a subheading and so on. Typst has more lightweight markup like this, see the syntax reference for a full list.

  • Mathematical equations are enclosed in dollar signs. By adding extra spaces around the contents of an equation, we can put it into a separate block. Multi-letter identifiers are interpreted as Typst definitions and functions unless put into quotes. This way, we don't need backslashes for things like floor and sqrt. And phi.alt applies the alt modifier to the phi to select a particular symbol variant.

  • Now, we get to some scripting. To input code into a Typst document, we can write a hash followed by an expression. We define two variables and a recursive function to compute the n-th fibonacci number. Then, we display the results in a center-aligned table. The table function takes its cells row-by-row. Therefore, we first pass the formulas $F_1$ to $F_8$ and then the computed fibonacci numbers. We apply the spreading operator (..) to both because they are arrays and we want to pass the arrays' items as individual arguments.

Text version of the code example.
#set page(width: 10cm, height: auto)
#set heading(numbering: "1.")

= Fibonacci sequence
The Fibonacci sequence is defined through the
recurrence relation $F_n = F_(n-1) + F_(n-2)$.
It can also be expressed in _closed form:_

$ F_n = round(1 / sqrt(5) phi.alt^n), quad
  phi.alt = (1 + sqrt(5)) / 2 $

#let count = 8
#let nums = range(1, count + 1)
#let fib(n) = (
  if n <= 2 { 1 }
  else { fib(n - 1) + fib(n - 2) }
)

The first #count numbers of the sequence are:

#align(center, table(
  columns: count,
  ..nums.map(n => $F_#n$),
  ..nums.map(n => str(fib(n))),
))

Installation

Typst's CLI is available from different sources:

  • You can get sources and pre-built binaries for the latest release of Typst from the releases page. Download the archive for your platform and place it in a directory that is in your PATH. To stay up to date with future releases, you can simply run typst update.

  • You can install Typst through different package managers. Note that the versions in the package managers might lag behind the latest release.

    • Linux: View Typst on Repology
    • macOS: brew install typst
    • Windows: winget install --id Typst.Typst
  • If you have a Rust toolchain installed, you can also install the latest development version with cargo install --git https://github.com/typst/typst --locked typst-cli. Note that this will be a "nightly" version that may be broken or not yet properly documented.

  • Nix users can use the typst package with nix-shell -p typst or build and run the bleeding edge version with nix run github:typst/typst -- --version.

  • Docker users can run a prebuilt image with docker run -it ghcr.io/typst/typst:latest.

Usage

Once you have installed Typst, you can use it like this:

# Creates `file.pdf` in working directory.
typst compile file.typ

# Creates PDF file at the desired path.
typst compile path/to/source.typ path/to/output.pdf

You can also watch source files and automatically recompile on changes. This is faster than compiling from scratch each time because Typst has incremental compilation.

# Watches source files and recompiles on changes.
typst watch file.typ

Typst further allows you to add custom font paths for your project and list all of the fonts it discovered:

# Adds additional directories to search for fonts.
typst compile --font-path path/to/fonts file.typ

# Lists all of the discovered fonts in the system and the given directory.
typst fonts --font-path path/to/fonts

# Or via environment variable (Linux syntax).
TYPST_FONT_PATHS=path/to/fonts typst fonts

For other CLI subcommands and options, see below:

# Prints available subcommands and options.
typst help

# Prints detailed usage of a subcommand.
typst help watch

If you prefer an integrated IDE-like experience with autocompletion and instant preview, you can also check out the Typst web app, which is currently in public beta.

Community

The main place where the community gathers is our Discord server. Feel free to join there to ask questions, help out others, share cool things you created with Typst, or just to chat.

Aside from that there are a few places where you can find things built by the community:

If you had a bad experience in our community, please reach out to us.

Contributing

We would love to see contributions from the community. If you experience bugs, feel free to open an issue. If you would like to implement a new feature or bug fix, please follow the steps outlined in the contribution guide.

To build Typst yourself, first ensure that you have the latest stable Rust installed. Then, clone this repository and build the CLI with the following commands:

git clone https://github.com/typst/typst
cd typst
cargo build --release

The optimized binary will be stored in target/release/.

Another good way to contribute is by sharing packages with the community.

Pronunciation and Spelling

IPA: /taɪpst/. "Ty" like in Typesetting and "pst" like in Hipster. When writing about Typst, capitalize its name as a proper noun, with a capital "T".

Design Principles

All of Typst has been designed with three key goals in mind: Power, simplicity, and performance. We think it's time for a system that matches the power of LaTeX, is easy to learn and use, all while being fast enough to realize instant preview. To achieve these goals, we follow three core design principles:

  • Simplicity through Consistency: If you know how to do one thing in Typst, you should be able to transfer that knowledge to other things. If there are multiple ways to do the same thing, one of them should be at a different level of abstraction than the other. E.g. it's okay that = Introduction and #heading[Introduction] do the same thing because the former is just syntax sugar for the latter.

  • Power through Composability: There are two ways to make something flexible: Have a knob for everything or have a few knobs that you can combine in many ways. Typst is designed with the second way in mind. We provide systems that you can compose in ways we've never even thought of. TeX is also in the second category, but it's a bit low-level and therefore people use LaTeX instead. But there, we don't really have that much composability. Instead, there's a package for everything (\usepackage{knob}).

  • Performance through Incrementality: All Typst language features must accommodate for incremental compilation. Luckily we have comemo, a system for incremental compilation which does most of the hard work in the background.

webapp-issues's People

Contributors

laurmaedje avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

webapp-issues's Issues

Add folders to file panel

Description

Add folders to the web app's file panel

Use Case

Better organization of files and figures.

Auto-completion in multi-line editing mode

Description

When I press enter for auto-completion in multi-line editing mode, only the first row is auto-completed and the other rows are not changed. And the other cursors disppear.

image

image

Use Case

I think this feature is helpful when writing several lines of similar code at the same time but it's not convenient to write functions.

Add git/pijul/revision control system access to web app

Description

It would be really helpful to have the files in a project accessible via git/pijul/revision control systems.
Overleaf supports git access, but only in the commercial version.

Use Case

Users could work offline properly and do collaborative real-time editing sessions.
They could also work smoothly in teams with different editing preferences.
Users could set, e.g., git tags to access and compare versions at different stages of the publication process, while still getting the benefits of collaborative real-time editing without installing anything.

See also

Change bars support: #1

Add Comment Functionality Similar to Overleaf in Typst Editor Pane

Description

Currently, Typst.app doesn't have a comment feature similar to Overleaf, where users can leave comments in the editor pane for collaborative purposes. This feature would be beneficial for users who work in teams or with supervisors who leave feedback directly within the document. Adding this functionality would encourage more users to migrate from other platforms to Typst for their document editing needs.

screenshot

Use Case

Student is working on their thesis and wants to use Typst for writing and editing the document. Their supervisor is used to leaving comments within the document in Overleaf. By incorporating a comment feature similar to Overleaf, the student can easily migrate to Typst, allowing for efficient collaboration and feedback.

Image uploading with CTRL+V

Add an ability to include an image from clipboard automatically by CTRL+V or through context menu, this way user won't spend too much time downloading e.g. screenshot and uploading it manually.

Typst Playground without sign up

Description

Users who want to test typst, should also get a preview of the editor, the signup wall slows down adoption, we're not chatGPT 😂😂

Use Case

For showing typst.app to a colleague on his computer really quick

Word count

Description

A subcommand or flag on the compiler to print out a word count would be very useful. It's a pain to use 3rd-party tools to do this in TeX. Like texcount, this would probably need to use several counters for captions, headings etc.; or a single count could be configurable with arguments to the subcommand.

Use Case

Word limits are common in academic writing, for journal publication, thesis requirements, and so on.

Support older compiler versions in web app

Description

I would like to select the older version of typst for my old project, which I need to complete today. However, our website requires the latest version. This means we need to spend time trying to adapt the project to the new version, which may not be efficient for productivity.

Use Case

chose from version

  • v0.0.3
  • v0.0.4

Template storage

Description

I don't think there's any feature allowing the storage of a custom template in the template gallery of the typst web app for later use. This could come handy !

Use Case

With the inclusion of this feature, users would have the convenient ability to store their personalized templates in the existing gallery. This functionality empowers them to access and utilize their custom templates whenever desired, ensuring an efficient usage.

Zombie sessions

Description

Sometimes the web app becomes unresponsive or the compiler keeps crashing or some other weird behaviour happens and I need to reload the page.
After that I always get zombie sessions: the app thinks I am editing the file 3 times, but I only have one tab open.
How do I get rid of them?

grafik

Browsers

Firefox

OS

Windows, Linux

Btw.: where is the source for the web-app?

bug: Auto-scroll does not work for Chinese characters

Auto-scroll doesn't work for Chinese characters. When typing, it scrolls to the first page or the previous page.

The issue happens no matter the document language is zh or en.

The auto-scroll works well when type a small amount of Chinese characters among English characters, but fails when type (both English and Chinese characters) among a large number of Chinese characters.

Link: how to open new tab and then jump to the target link

Description

The current link can only jump to the link at the current tab, how to automatically open new tab and then jump to the target link.

This is similar to the function target="_blank" in HTML

<a href="https://www.google.com/" target="_blank">Visit Google Website</a>

Use Case

For example, if there are a lot of links in someone's resume, people who click the link do not want to shut down the resume page.

Warn user if a dimension of the canvas becomes larger than 32767 pixels

If one does set page(width: 21cm, height: auto)to get a page with the same width as A4, but with arbitrary height, one runs into issues when the page gets long. It'll just stop rendering. This seems to be connected to the fact that no web browser supports a canvas higher than 32767 pixels.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas?retiredLocale=de#maximum_canvas_size

#lorem(17000)will do the trick in my document.

It would helpful if the web app would fail a bit more gracefully, and tell the user what's wrong.

When pressing enter inside a list, indentation is unintuitive

In the following example: (with | representing the cursor)

+ Some list item with text in it.|
+ Some other list item from the same list

pressing enter would put the cursor on the same indentation level as the list markers, and not inside the list content:

+ Some list item with text in it.
|
+ Some other list item from the same list

rather than:

+ Some list item with text in it.
  |
+ Some other list item from the same list

I feel this is unexpected mostly because when doing the same when the list item already has more than one line in it, the latter happens. Though I do believe most code-oriented text editors put you on the deepest indentation level that hasn't yet closed.

I do understand the editor is trying to be helpful by letting me add a list item, so this is a trade off we have to make, but I claim generally, if you're in the middle of a list, you likely want the latter behaviour.

New file synced with main.typ

Description

When I create a new file, it is synced to main.typ.
If I edit one, the other is edited as well.

Reproduction step:

  • click on the + sign to add a new file.
  • edit the new file.
  • check main.typ.

Kapture 2023-05-07 at 12 34 54

NOTE: reloading the page fixed the issue for me.

Reproduction URL

No response

Browsers

Chrome

OS

macOS

Vim mode in the editor

Hey great product, ideally i would love to have support to writing these documents either in my IDE or text editor with vim. Is there a way to get a vim mode in the web app?

Cannot upload file

I got this message when trying to upload an image

Cannot upload file IMG_5549png: The backend services were not able to communicate with each other.

Spell check in web app

hey guys, fantastic project with swift editing response. I am wondering can you add spell checking function in your web ui typst.app?

Rename project in dashboard

Description

It took me a while to find out how to rename a project (open settings in editor mode).

image image

Having this in the dashboard among possible actions would make it easier to organize but (afaik) that is not possible.

image

Use Case

Overleaf also doesn't have this feature in the project overview page and one needs to open the project in order to rename it. However, this makes organization of larger number of projects cumbersome (imagine having to open a file in order to rename it).

image

Keybinding Suggestions

Hi,

Thank you for the great project! I have two quality-of-life suggestions coming from Overleaf / other editors.

(1). Cmd + /: on macOS is quite common for line commenting. I think users might find it more intuitive if lint commenting were bound to that keybinding.

(2). Cmd + s: my understanding is that the document is saved after every keystroke. However, users from Overleaf and other editors may find themselves using this keybinding out of habit. I think it's worth considering (a). manual save here if the user would like to confirm their document is synchronized or (b). no-op to prevent the browser from thinking that the user wants to save the html source.

Thanks for the consideration!

Ctrl+A shall decrement numbers in Vim mode

Description

CTRL+A does not increment numbers in Vim-Mode, but CTRL+X decrements numbers. Submitted via user feedback.

Reproduction URL

No response

Browsers

No response

OS

No response

Zotero Integration in Web App

Hi! Typst is a brilliant idea, and the execution is well done. It is likely to be too early to make this suggestion, but here goes. It may be possible to generate a .bib file through the Zotero API and use that in a project. That would be amazing!

Add region option to template wizard

Description

Hi, this Typst code snippet

// C
汉皇重色思倾国,御宇多年求不得。杨家有女初长成,养在深闺人未识。\
天生丽质难自弃,一朝选在君王侧。回眸一笑百媚生,六宫粉黛无颜色。

// J
日本語の音韻は、「っ」「ん」を除いて母音で終わる開音節言語の性格 \
が強く、また標準語を含め多くの方言がモーラを持つ。

// K
(The Korean punctuations are rendered okay, because it uses European punctuations.)
대한항공은 대한민국 국적의 항공사이며, 항공 동맹체인 스카이팀의 창립 항공사로 인천국제공항과 김포국제공항을 허브 공항으로 두고 있다.

was rendered correctly in PDF locally, with the Typst CLI:
Screenshot 2023-05-21 at 11 03 04

but the web app rendered the punctuations differently. Specifically, they are put at the middle of the character boxes, instead of at the corner:
Screenshot 2023-05-21 at 11 04 07

I'm not sure this is a font issue, though -- you may notice the glyph's fonts are different in the local PDF vs the web app (for example, Screenshot 2023-05-21 at 11 18 00 vs Screenshot 2023-05-21 at 11 18 11). The PDF version is generally more common in modern usage.

Maybe @peng1999 has some insights, but this issue only manifests on the web app so maintainers's involvement might be necessary.

Reproduction URL

https://typst.app/project/rFk7tfTxRTj_lwChTsvuV7

Browsers

Chrome

OS

macOS

new project not creating with "&" in title

Description

The problem happened on Opera and Chrome, when i was creating a project , if i put "&" in my title the creation windows closed and i had the blank page from the index again. my title was "mémoire m1 : ballande france & associé"

Reproduction URL

No response

Browsers

No response

OS

Windows

Image upload does not overwrite original

Description

When uploading an image (~.png) with the same file name as one that is already in the project, the new image does not overwrite the original image.

The web app presents a warning message stating that the file will be overwritten, which is currently incorrect.

I have not checked the behavior for other file types.

Reproduction URL

No response

Browsers

Chrome

OS

Windows

Disable line numbers

Description

Disable the line number column

Use Case

More space in the editor, preferring usage of a file number indicator

Treat _ and * as brackets

Description

The web app should always insert pairs of _ and * and support adding them around the current selection.

Use Case

Editing faster.

Web app sometimes freezes on syntax error

Description

As reported by a Discord user (and something I have previously experienced myself), sometimes the web app seems to freeze when encountering certain syntax errors. It seems to be a little bit random (I'm yet to find a way to reproduce this consistently - if someone finds one, please share below).

It can occur for any syntax error, and, when it does, the web app "freezes" in the sense that you can't type anymore (though you can click on things still), and you have to reload the page to continue typing (it can also roll things back a bit depending on whether or not you managed to change or remove anything while it was "frozen"). A sample case where this appeared was shared by a Discord user (image below - a simple syntax error). This still doesn't seem to reproduce it very consistently at all, so the example isn't perfect, but it can happen in many similar situations.

image

Reproduction URL

No response

Browsers

Firefox, Chrome

OS

Windows, Linux

Multiple incorrect key bindings in VIM mode of the Editor

There are multiple incorrect key bindings in VIM mode that is not default to VIM keybindings.

The major one are

  • C-d is delete char (should be scroll down)
  • C-v is scroll down (should be visual block)
  • C-f is move cursor right (should be scroll forward)
  • C-b is move cursor left (should be scroll backward)

I noticed that all keys are the key that prefixed with Ctrl key, there might be issue regarding this.

Web app: Insufficient permissions to upload files in shared project

Hi, I have created a project in the https://typst.app and shared it with my colleague via the Share link (read + write).

They are able to change the text of the project, but cannot upload files. If they try, they are shown this error message:

Cannot upload file {filename}: You do not have sufficient permissions to access this project.

However, I am unable to find any settings to give them this permissions. Is this a bug or am I just too blind to find the setting? :)

Allow users to upload any type of file (and have it work)

I need to add a code listing that contains the entirety of the script I used to produce the plots for my homework, but I cannot upload any of the files.

Furthermore, when I tried renaming the files to *.txt, upon upload, the web UI did not show their contents. Attempting to open the *.txt file in the web UI showed only main.typ.

typing dead keys like `^2` in web app does not update error messages

When typing $x^2 in the web app editor, the document shows as expected but in the editor panel there's a stale "expected expression" error message on the ^:

image

For context, the events sent by javascript are

keydown { target: div.cm-content.cm-lineWrapping, key: "Dead", charCode: 0, keyCode: 160 }

keydown { target: div.cm-content.cm-lineWrapping, key: "^2", charCode: 0, keyCode: 50 }
keypress { target: div.cm-content.cm-lineWrapping, key: "^", charCode: 94, keyCode: 0 }
keypress { target: div.cm-content.cm-lineWrapping, key: "2", charCode: 50, keyCode: 0 }

Leaving a shared project is only possible from grid view

Description

I'd like to be able to remove projects from under "Shared with me".

I do not think this is currently possible. The delete symbol is obviously gone, since they're read-only, but there should be a way to simply remove them.
image

Use Case

After clicking on a bunch of shared documents my interface is cluttered with projects I'd like to remove. This seems like a basic feature to have.

Change bars support

Is there a possibility of creating change bars, either through typst directly or a post-processing step that compares two documents' markup? I use these a lot in technical writing to indicate changes on released documents (even when the raw markup can be diffed in a more modern version control system).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.