npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@pubann/textae

v14.3.2

Published

text annotation editor

Downloads

140

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jindong.kimjindong.kimledsunledsunarino_tamadaarino_tamada

Keywords

DBCLSannotationjavascript

Readme

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 @pubann/textae

How to Use in HTML

To use TextAE in your HTML, follow these steps:

  1. 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/@pubann/textae/dist/lib/css/textae-x.y.z.min.css">
<script src="node_modules/@pubann/textae/dist/lib/textae-x.y.z.min.js"></script>

Note: Replace x.y.z with the actual version number you have installed.

  1. 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/@pubann/textae/dist/lib/css/textae-x.y.z.min.css">
  <script src="node_modules/@pubann/textae/dist/lib/textae-x.y.z.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 [email protected]: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.