Content SafetyInstallation

Installation

How to install and set up @visulima/content-safety in your project.

Last updated:

Installation

Package Managers

Install @visulima/content-safety using your preferred package manager:

npm

npm install @visulima/content-safety

yarn

yarn add @visulima/content-safety

pnpm

pnpm add @visulima/content-safety

bun

bun add @visulima/content-safety

Requirements

Runtime Support

@visulima/content-safety works in all modern JavaScript environments:

  • Node.js: 18.x or higher
  • Browsers: All modern browsers with ES2020+ support
    • Chrome 80+
    • Firefox 72+
    • Safari 14+
    • Edge 80+
  • Deno: 1.x or higher
  • Bun: 1.x or higher

TypeScript Support

The library is written in TypeScript and includes full type definitions:

  • TypeScript: 5.0 or higher (recommended)
  • Types are included in the package (no separate @types package needed)

Import Methods

import { checkBannedWords, BANNED_WORDS } from "@visulima/content-safety";
import type { BannedWordMatch, BannedWordsResult } from "@visulima/content-safety";

CommonJS

const { checkBannedWords, BANNED_WORDS } = require("@visulima/content-safety");

Named Imports

Import only what you need for optimal tree-shaking:

// Import just the checker function
import { checkBannedWords } from "@visulima/content-safety";

// Import just the word list
import { BANNED_WORDS } from "@visulima/content-safety";

// Import types
import type { BannedWordMatch, BannedWordsResult } from "@visulima/content-safety";

Verification

Verify your installation by running a simple check:

import { checkBannedWords } from "@visulima/content-safety";

const result = checkBannedWords("Hello world");
console.log(result);
// { hasBannedWords: false, matches: [] }

Build Tools

Webpack

Works out of the box with Webpack 5:

// No special configuration needed
import { checkBannedWords } from "@visulima/content-safety";

Vite

Works seamlessly with Vite:

import { checkBannedWords } from "@visulima/content-safety";

Rollup

Compatible with Rollup:

import { checkBannedWords } from "@visulima/content-safety";

esbuild

Works with esbuild:

import { checkBannedWords } from "@visulima/content-safety";

Framework Integration

React

import { useState } from "react";
import { checkBannedWords } from "@visulima/content-safety";

function CommentForm() {
    const [text, setText] = useState("");
    const [error, setError] = useState("");

    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        const value = e.target.value;
        setText(value);

        const result = checkBannedWords(value);
        if (result.hasBannedWords) {
            setError("Content contains inappropriate language");
        } else {
            setError("");
        }
    };

    return (
        <div>
            <textarea value={text} onChange={handleChange} />
            {error && <p className="error">{error}</p>}
        </div>
    );
}

Vue

<script setup lang="ts">
import { ref, computed } from "vue";
import { checkBannedWords } from "@visulima/content-safety";

const text = ref("");

const result = computed(() => checkBannedWords(text.value));
const hasError = computed(() => result.value.hasBannedWords);
</script>

<template>
    <div>
        <textarea v-model="text" />
        <p v-if="hasError" class="error">Content contains inappropriate language</p>
    </div>
</template>

Next.js

Works in both client and server components:

// app/api/moderate/route.ts
import { checkBannedWords } from "@visulima/content-safety";

export async function POST(request: Request) {
    const { text } = await request.json();
    const result = checkBannedWords(text);

    return Response.json({
        allowed: !result.hasBannedWords,
        matches: result.matches,
    });
}

Svelte

<script lang="ts">
  import { checkBannedWords } from '@visulima/content-safety';

  let text = '';

  $: result = checkBannedWords(text);
  $: hasError = result.hasBannedWords;
</script>

<textarea bind:value={text} />
{#if hasError}
  <p class="error">Content contains inappropriate language</p>
{/if}

Edge Runtime Support

Vercel Edge Functions

import { checkBannedWords } from "@visulima/content-safety";

export const config = {
    runtime: "edge",
};

export default async function handler(request: Request) {
    const { text } = await request.json();
    const result = checkBannedWords(text);

    return new Response(JSON.stringify(result), {
        headers: { "content-type": "application/json" },
    });
}

Cloudflare Workers

import { checkBannedWords } from "@visulima/content-safety";

export default {
    async fetch(request: Request) {
        const { text } = await request.json();
        const result = checkBannedWords(text);

        return new Response(JSON.stringify(result), {
            headers: { "content-type": "application/json" },
        });
    },
};

Troubleshooting

Module Not Found

If you encounter module resolution issues:

  1. Clear your package manager cache:

    npm cache clean --force
# or
yarn cache clean
# or
pnpm store prune

  2. Delete node_modules and reinstall:

    rm -rf node_modules
npm install

TypeScript Errors

If TypeScript can't find types:

  1. Ensure moduleResolution is set to "bundler" or "node16" in tsconfig.json:

    {
    "compilerOptions": {
        "moduleResolution": "bundler"
    }
}

  2. Check that your TypeScript version is 5.0+:

    npx tsc --version

Build Errors

If you encounter build errors in older browsers:

  1. Ensure your bundler is configured to transpile node_modules: 
    // vite.config.js
export default {
    build: {
        target: "es2020",
    },
};

Next Steps

Edit on GitHub

On this page

Installation
Package Managers
npm
yarn
pnpm
bun
Requirements
Runtime Support
TypeScript Support
Import Methods
ES Modules (Recommended)
CommonJS
Named Imports
Verification
Build Tools
Webpack
Vite
Rollup
esbuild
Framework Integration
React
Vue
Next.js
Svelte
Edge Runtime Support
Vercel Edge Functions
Cloudflare Workers
Troubleshooting
Module Not Found
TypeScript Errors
Build Errors
Next Steps
Support

Contribute to our work and keep us going

Community is the heart of open source. The success of our packages wouldn't be possible without the incredible contributions of users, testers, and developers who collaborate with us every day.Want to get involved? Here are some tips on how you can make a meaningful impact on our open source projects.

Ready to help us out?

Be sure to check out the package's contribution guidelines first. They'll walk you through the process on how to properly submit an issue or pull request to our repositories.

Submit a pull request

Found something to improve? Fork the repo, make your changes, and open a PR. We review every contribution and provide feedback to help you get merged.

Good first issues

Simple issues suited for people new to open source development, and often a good place to start working on a package.
View good first issues