gitwtfhub

wtf is katana-text?

efficiencysimplicity/katana-text — explained in plain English

Analysis updated 2026-05-18

1JavaScriptAudience · developerComplexity · 2/5Setup · easy

TL;DR

A React library that disguises a website's text so automated scrapers cannot cleanly copy it, while it still looks normal to readers.

Mindmap

mindmap
  root((Katana-text))
    What it does
      Shuffles word positions
      Remaps font characters
      Blocks text scraping
    Tech stack
      JavaScript
      React
      Pretext library
    Use cases
      Protecting site content
      Blocking AI scrapers
      Lightweight alternative
    Audience
      Web developers
      Site owners
    Related
      Katana image protection
      ungenerated.io project

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Protect blog or article text on a website from casual scraping bots.

REASON 2

Add scraping protection without the performance cost of a heavier bot-blocking system.

REASON 3

Render sensitive text blocks as React components that resist automated copying.

REASON 4

Pair with the related Katana image protection system for full-page scraping defense.

What's in the stack?

JavaScriptReact

How it stacks up

efficiencysimplicity/katana-text0xmukesh/docusaurus-tutorial1tsmejp/palworld-docker-wine
Stars111
LanguageJavaScriptJavaScriptJavaScript
Last pushed2021-12-27
MaintenanceDormant
Setup difficultyeasyeasymoderate
Complexity2/52/54/5
Audiencedeveloperdeveloperops devops

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 30min

Requires loading a custom .woff font file and wiring up the returned React component per text block.

Wtf does this do

Katana-text is a small React library meant to protect the text on a website from being scraped, meaning copied automatically by bots or AI tools that read a page's raw content. Instead of relying on a heavier system that blocks bots by making them prove they are human, or a system that traps bots in a maze of fake pages, Katana-text works by disguising the text itself so it is hard to extract cleanly while still looking normal to a human reader. It does this using a library called Pretext, which figures out where each word inside your element needs to be positioned. Katana-text then places each word as an individually positioned piece in the page's underlying structure, shuffles the order of those pieces, and lets some of them overlap. On top of that, it applies a custom font where each character actually displayed maps to a different character underneath, so the raw text that a scraper would see does not match what a human visually reads. To use it, a developer first calls a function called loadAndShuffleFont, passing in the web address of a font file and a name for the resulting font, which returns a font management object. For each block of text to protect, the developer calls createKatanaTextComponent with that font object, the text content, a height in pixels, and a line height that should be larger than the height. This returns a React function component that can then be placed anywhere in a page, and it automatically adjusts its own height based on the text inside it, though setting an explicit width is recommended. The README notes that createKatanaTextComponent itself is not a React component, it returns a function that is one, and it points readers to a demos folder on GitHub for usage examples. Katana-text grew out of a related project called Katana, which protects images on a website named ungenerated.io from AI scraping. That original Katana system is kept private for security reasons, but Katana-text is planned as a free, open React library covering the text side of the same problem.

Yoink these prompts

Prompt 1
Show me how to call loadAndShuffleFont and createKatanaTextComponent in Katana-text based on its README.
Prompt 2
Explain how Katana-text disguises text using word shuffling and a custom font mapping, from its README.
Prompt 3
Walk me through adding a Katana-text protected text block to a React page with a set width.
Prompt 4
Compare how Katana-text's approach differs from a proof-of-work bot blocker like Anubis, based on the README's explanation.

Frequently asked questions

wtf is katana-text?

A React library that disguises a website's text so automated scrapers cannot cleanly copy it, while it still looks normal to readers.

What language is katana-text written in?

Mainly JavaScript. The stack also includes JavaScript, React.

How hard is katana-text to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is katana-text for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.