An open API service indexing awesome lists of open source software.

https://github.com/jeffreymaomao/texfield

TexField, a web app / mac app to create and manage LaTeX notes on an infinite canvas.
https://github.com/jeffreymaomao/texfield

infinite-canvas interactive-note latex latex-renderer math-notes mind-map note-managment web-application

Last synced: about 2 months ago
JSON representation

TexField, a web app / mac app to create and manage LaTeX notes on an infinite canvas.

Awesome Lists containing this project

README

        





TexField Logo




TexField

**TexField** is a web application designed for creating and managing LaTeX notes on an infinitely large canvas. By leveraging [KaTeX](https://katex.org/) for LaTeX rendering, TexField enables fast and efficient display of mathematical formulas directly in your browser.

## Getting Started

**TexField** is an online web application. To start using it, simply visit [![play](https://img.shields.io/badge/play-start-red.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48cGF0aCBkPSJNMTI5IDExMWMtNTUgNC05MyA2Ni05MyA3OEwwIDM5OGMtMiA3MCAzNiA5MiA2OSA5MWgxYzc5IDAgODctNTcgMTMwLTEyOGgyMDFjNDMgNzEgNTAgMTI4IDEyOSAxMjhoMWMzMyAxIDcxLTIxIDY5LTkxbC0zNi0yMDljMC0xMi00MC03OC05OC03OGgtMTBjLTYzIDAtOTIgMzUtOTIgNDJIMjM2YzAtNy0yOS00Mi05Mi00MmgtMTV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)](https://jeffreymaomao.github.io/TexField/dist/)



## Usage / Shortcuts

| MathEditor Action | Method (mac OS) | Method (Windows) |
| ---------------------------- | :--------------------------- | :------------------------------------------- |
| Toggle Block Editing mode | command + / | Ctrl + / |
| Create New Block | return | Enter |
| Delete Foucs Block | delete | Backspace |
| Move focus Up / Down | or | Up Arrow or Down Arrow |
| Focus Block | Click Block | Click Block |

| TexField Action | Method (mac OS) | Method (Windows) |
| ------------------- | :------------------------------------------------------ | :------------------------------------------------ |
| Move Canvas | Scroll Wheel / Drag Canvas | Scroll Wheel / Drag Canvas |
| Add New Note | Double Click | Double Click |
| Add Path Link | command + shift + Drag Note | Ctrl + Shift + Drag Note |
| Focus Note | command + Click Note | Ctrl + Click Note |
| Focus Path | Click Path | Click Path |
| Move Note | command + Drag Note | Ctrl + Drag Note |
| Center Note | command + option + 1~9 | Ctrl + Alt + 1~9 |
| Delete Focused Note | Select Note ⇨ delete | Select Note ⇨ Backspace |
| Delete Focused Note | Select Path ⇨ delete | Select Path ⇨ Backspace |

| Global Action | Method (mac OS) | Method (Windows) |
| ------------------------ | ---------------------------------------------------- | ------------------------------------------------- |
| Toggle Dark / Light mode | command + b | Ctrl + b |
| Print PDF | command + p | Ctrl + p |
| Full Screen | command + f | Ctrl + f |
| Export JSON | command + e | Ctrl + e |
| Import JSON | Drag and Drop file to Window | Drag and Drop file to Window |
| Export LaTeX | command + shift + e | Ctrl + Shift + e |

## User Interface

### Introduction about "Note", "Block" and "Canvas"




TexField Focusing

The images above provide a simple introduction to the interface. The surrounding area is the Canvas, the center contains "Note", and within the notes ate editable regions for mathematical formulas called "Block". You can click on a block to focus on it.

---

### Toggling between "Normal Mode" and "Edit Mode"




TexField Editing


The image above shows how to edit a "Block". After focusing on a "Block", you can press command + / (For Windows user, press Ctrl + /) to toggle between "Normal Mode" and "Edit Mode".

---

### Adding / Deleting "Blocks" & Draging "Canvas" and "Note"




TexField Add / Delete Block



TexField drag note & canvas

- The left video shows how to add and delete "Blocks". After focusing on a "Block", press enter (For Windows users, press Enter) to add a new "Block" below the focused "Block". Press delete (For Windows users, press Backspace) to delete the focused "Block".
- The right video shows how to move the entire "Canvas" and a single "Note". Dragging the "Canvas" directly will move the entire canvas. Press and hold command (For Windows users, hold Ctrl), then click on a "Note" to focus on it and drag it to move the "Note" individually.

> [!Note]
>
> The video I present is the old version. Therefore, adding/deleting "Block" need to hold command/ctrl. However, in current version, you don't need to do that.

---

### Linking two "Notes" by a "Path"




TexField Editing

The video above shows how to link two "Notes". Press and hold command + shift and click-drag one of the "Note" to create a "Path", which is Bezier curve (For Windows user, hold Ctrl + Shift). Then, while holding the keys, release the click on the other "Note" to connect them with a "Path".

---

### Focus / Delete "Note" and "Path"




TexField Editing

The video above shows how to delete "Block" and "Path". First, use command + click (Windows users, Ctrl + click) to select a "Note", or directly click a "Path" to select it. Then press Delete (Windows users, Backspace) to delete the selected "Note" or "Path".

> [!CAUTION]
> Currently, operations on "Notes" or "Paths" do not have an undo feature.
> Therefore, deleting or moving "Notes" and "Paths" cannot be undone.

## Features

- **Infinite Canvas**: Interact with a canvas that expands indefinitely to manage and organize your LaTeX notes and diagrams.
- **KaTeX Integration**: Utilize KaTeX for efficient and accurate LaTeX rendering, supporting a wide range of mathematical notation.

## Technology Stack

![JavaScript](https://img.shields.io/badge/JavaScript-gray?style=plastic&logo=javascript) ![CSS](https://img.shields.io/badge/CSS-gray?style=plastic&logo=css3&logoColor=rgb(100,160,250)) ![HTML](https://img.shields.io/badge/HTML-gray?style=plastic&logo=html5&logoColor=rgb(250,150,100)) ![LaTeX](https://img.shields.io/badge/LaTeX-gray?style=plastic&logo=LaTeX)

## License

**TexField** is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.

## Contact

For any questions or feedback, feel free to reach out to us at [[email protected]]([email protected]).