@texti/sdk

v1.0.4

Published

2 months ago

In-context translation editor SDK for Texti

0High
0Medium
0Low

elless

translation i18n localization in-context-editing

Texti SDK

In-context translation editor for your applications.

Edit translations directly in your application - no need to switch between your app and a translation dashboard. Click on any text, edit it, and see changes immediately.

Features

✅ In-context editing - Click on text to edit translations
✅ Multi-language support - Edit all languages in one place
✅ Real-time sync - Changes appear immediately
✅ Framework agnostic - Works with any JavaScript framework
✅ TypeScript support - Full type definitions included

Installation

Using npm

npm install @texti/sdk

Using yarn

yarn add @texti/sdk

Quick Start

1. Initialize the SDK

import TextiSDK from "@texti/sdk";

const texti = new TextiSDK({
  apiUrl: "https://texti.ee/api",
  projectId: "your-project-id",
  apiKey: "your-api-key",
  enableVisualEditor: true,
  debug: false,
});

2. Add translation keys to your HTML

<h1 data-texti-key="home.welcome">Welcome to our app!</h1>
<p data-texti-key="home.description">This is a description</p>

3. Click and edit!

When logged in with proper permissions, click on any text to edit translations for all languages.

API Reference

Configuration

interface TextiConfig {
  apiUrl: string; // Texti API URL
  projectId: string; // Your project ID
  apiKey: string; // Your API key
  enableVisualEditor?: boolean; // Enable click-to-edit (default: true)
  autoInit?: boolean; // Auto-initialize SDK (default: true)
  debug?: boolean; // Enable debug logging (default: false)
}

Methods

`t(key: string, params?: Record<string, string>): string`

Get translation for a key:

const text = texti.t("home.welcome");
const greeting = texti.t("greet.user", { name: "John" }); // "Hello, {{name}}"

`setLanguage(languageCode: string): void`

Change the current language:

texti.setLanguage("es"); // Switch to Spanish

`setEnvironment(environment: 'dev' | 'prod'): Promise<void>`

Switch between development and production translations:

await texti.setEnvironment("prod");

`getLanguages(): Language[]`

Get all available languages:

const languages = texti.getLanguages();

`getPermissions(): UserPermissions | null`

Get current user's permissions:

const permissions = texti.getPermissions();
if (permissions?.canEdit) {
  console.log("User can edit translations");
}

Usage Examples

Vanilla JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <h1 data-texti-key="app.title">Loading...</h1>
    <p data-texti-key="app.description">Loading...</p>

    <script src="https://cdn.jsdelivr.net/npm/@texti/sdk/dist/index.umd.js"></script>
    <script>
      const texti = new TextiSDK({
        apiUrl: "https://texti.ee/api",
        projectId: "your-project-id",
        apiKey: "your-api-key",
      });

      // Wait for SDK to initialize
      texti.init().then(() => {
        console.log("Texti SDK initialized!");
      });
    </script>
  </body>
</html>

React

import { useEffect, useState } from "react";
import TextiSDK from "@texti/sdk";

const texti = new TextiSDK({
  apiUrl: "https://texti.ee/api",
  projectId: "your-project-id",
  apiKey: "your-api-key",
});

function App() {
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    texti.init().then(() => setInitialized(true));
  }, []);

  if (!initialized) return <div>Loading translations...</div>;

  return (
    <div>
      <h1 data-texti-key="app.title">{texti.t("app.title")}</h1>
      <p data-texti-key="app.description">{texti.t("app.description")}</p>
    </div>
  );
}

Vue

<template>
  <div>
    <h1 data-texti-key="app.title">{{ t("app.title") }}</h1>
    <p data-texti-key="app.description">{{ t("app.description") }}</p>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import TextiSDK from "@texti/sdk";

const texti = new TextiSDK({
  apiUrl: "https://texti.ee/api",
  projectId: "your-project-id",
  apiKey: "your-api-key",
});

const t = (key) => texti.t(key);

onMounted(async () => {
  await texti.init();
});
</script>

Angular

import { Component, OnInit } from "@angular/core";
import TextiSDK from "@texti/sdk";

@Component({
  selector: "app-root",
  template: `
    <div>
      <h1 data-texti-key="app.title">{{ t("app.title") }}</h1>
      <p data-texti-key="app.description">{{ t("app.description") }}</p>
    </div>
  `,
})
export class AppComponent implements OnInit {
  private texti: TextiSDK;

  constructor() {
    this.texti = new TextiSDK({
      apiUrl: "https://texti.ee/api",
      projectId: "your-project-id",
      apiKey: "your-api-key",
    });
  }

  async ngOnInit() {
    await this.texti.init();
  }

  t(key: string): string {
    return this.texti.t(key);
  }
}

Getting API Keys

To use the SDK, you need an API key from your Texti dashboard:

Login to your Texti dashboard
Navigate to Settings → API Keys
Click "Generate API Key"
Enter a descriptive name (e.g., "Production Server")
Click "Generate"
Copy the API key (shown only once!)
Store it securely (e.g., environment variables)

Important: API keys are displayed only once for security. Make sure to copy and store them securely before closing the dialog.

Security

Always use HTTPS in production
Keep your API keys secure (use environment variables)
Never commit API keys to version control
Use environment-specific API keys (dev vs prod)
Set proper user permissions in Texti dashboard
Rotate API keys periodically
Delete unused API keys from the dashboard

License

MIT