New:Socket for Asana Is Now Available.Learn more →
Sign In

@pubann/textae

Package Overview
Dependencies
Maintainers
3
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pubann/textae

text annotation editor

Source
npmnpm
Version
13.11.0
Version published
Maintainers
3
Created
Source

TextAE

An embeddable, web-based visual editor of text annotation

homepage

http://textae.pubannotation.org/

Usage

Using as an npm package

You can also use textae as an npm package in your project.

Installation

To install the package, run the following command:

npm install textae

How to Use in HTML

To use TextAE in your HTML, follow these steps:

  • Include the stylesheet and script

Add the following lines to your <head> section to load the TextAE CSS and JS from your node_modules directory:

<link rel="stylesheet" href="node_modules/textae/dist/lib/css/textae-13.10.0.min.css">
<script src="node_modules/textae/dist/lib/textae-13.10.0.min.js"></script>
  • Prepare the container Add a <div> element with the class textae-editor to your HTML. This is the element where the TextAE editor will be rendered.
<div class="textae-editor" title="Example Editor" mode="edit"></div>

Example HTML

Here is an example of how to use textae in an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TextAE Example</title>
  <link rel="stylesheet" href="node_modules/textae/dist/lib/css/textae-13.10.0.min.css">
  <script src="node_modules/textae/dist/lib/textae-13.10.0.min.js"></script>
</head>
<body>
  <div class="textae-editor" title="Example Editor" mode="edit"></div>
</body>
</html>

parameters

This editor is customizable by html attributes.

source

Set the url of an annotations json.

Example:

<div class="textae-editor" source="./annotations.json" ></div>

config

Set the url of a config json.

Example:

<div class="textae-editor" config="./config.json" ></div>

autocompletion_ws

Set the url of the autocompletion web service.

Example:

<div class="textae-editor" autocompletion_ws="/autocomplete?order=desc"></div>

mode

Set default edit mode. values:

  • view (default)
  • edit

Example:

<div class="textae-editor" mode="edit"></div>

control

Show the control bar of the editor.

  • auto (default) : Show the control bar in edit mode
  • visible : Show the control bar always
  • hidden : Do not show the control bar always

Example:

<div class="textae-editor" control="visible" ></div>

status_bar

Show the status bar of the editor. When the value is 'on', show the status bar. the status bar is not shown at default.

Example:

<div class="textae-editor" status_bar="on" ></div>

For development

Preparation

Node.js is required to be installed on your system.

  • To clone the project and get into the directory
git clone git@github.com:pubannotation/textae.git
cd textae/
  • To install the required npm packages (which are specified in 'package.json').
npm install

Development

  • To open in your browser the file 'dev/development.html' through 'http://localhost:8000', for development
npm run watch

  • If the file does not open automatically, click here.

  • For development, your editions are supposed to be made to the files in the 'src' directory.

Build

  • To compile the files for distribution into the dictionary 'dist'.
npm run dist

Contributors (so far)

License

Released under MIT license.

Keywords

DBCLS
annotation
javascript

FAQs

Package last updated on 23 May 2025

Related posts

Socket for ClickUp Is Now Available

Product

Socket for ClickUp Is Now Available

Create ClickUp tasks from Socket alerts, automate ticketing with custom rules, and keep alert and task status synchronized.

By Jeppe Hasseriis  -  Aug 26, 2026
Socket for Asana Is Now Available

Product

Socket for Asana Is Now Available

Create and manage Asana tasks directly from Socket alerts, with manual task creation, automated ticketing rules, and two-way sync.

By Jeppe Hasseriis  -  Aug 25, 2026