Documentation Index Fetch the complete documentation index at: https://docs.stringboot.com/llms.txt
Use this file to discover all available pages before exploring further.
Get up and running with Stringboot in under 10 minutes . This guide will walk you through adding dynamic string management to your web application.
Prerequisites
Node.js 16+ and npm/yarn
A Stringboot API token(Get one here )
Basic knowledge of JavaScript/TypeScript
Step 1: Install Package # npm npm install @stringboot/web-sdk # yarn yarn add @stringboot/web-sdk # pnpm pnpm add @stringboot/web-sdk
Step 2: Initialize SDK import StringBoot from '@stringboot/web-sdk' ; // Initialize once at app startup await StringBoot . initialize ({ apiToken: 'YOUR_API_TOKEN_HERE' , baseUrl: 'https://api.stringboot.com' , // Optional defaultLanguage: 'en' , // Optional - defaults to browser language debug: true // Optional - enable console logs }); console . log ( '✅ Stringboot initialized!' );
import React from 'react' ; import { useStringBoot } from '@stringboot/web-sdk/react' ; function App () { const { initialized , error } = useStringBoot ({ apiToken: 'YOUR_API_TOKEN_HERE' , baseUrl: 'https://api.stringboot.com' , defaultLanguage: 'en' , debug: true }); if ( ! initialized ) { return < div > Loading Stringboot... </ div > ; } if ( error ) { return < div > Error: { error } </ div > ; } return < MainApp /> ; }
Security Note: Store your API token in environment variables (.env.local) rather than hardcoding it.
Step 3: Use Strings in Your App Vanilla JS
React Hooks
TypeScript
// Get a single string const welcomeText = await StringBoot . get ( 'welcome_message' ); document . getElementById ( 'title' ). textContent = welcomeText ; // Get string with specific language const spanishText = await StringBoot . get ( 'welcome_message' , 'es' ); // Watch for updates (reactive) StringBoot . watch ( 'welcome_message' , ( newValue ) => { document . getElementById ( 'title' ). textContent = newValue ; });
import { useString , useLanguage } from '@stringboot/web-sdk/react' ; function WelcomeComponent () { // Auto-updating string (updates when language changes) const welcomeText = useString ( 'welcome_message' ); const description = useString ( 'app_description' ); // Language management const [ currentLang , setLanguage ] = useLanguage (); return ( < div > < h1 > { welcomeText } </ h1 > < p > { description } </ p > < select value = { currentLang } onChange = { ( e ) => setLanguage ( e . target . value ) } > < option value = "en" > English </ option > < option value = "es" > Español </ option > < option value = "fr" > Français </ option > </ select > </ div > ); }
import StringBoot , { StringBootConfig } from '@stringboot/web-sdk' ; // Initialize with type safety const config : StringBootConfig = { apiToken: process . env . STRINGBOOT_API_TOKEN ! , baseUrl: 'https://api.stringboot.com' , defaultLanguage: 'en' , debug: true }; await StringBoot . initialize ( config ); // Type-safe string access const welcomeText : string = await StringBoot . get ( 'welcome_message' ); // Type-safe language codes type SupportedLanguage = 'en' | 'es' | 'fr' | 'de' ; await StringBoot . changeLanguage ( 'es' as SupportedLanguage );
Step 4: Using FAQs (Optional) The FAQ Provider lets you deliver dynamic, multilingual FAQ content with offline-first caching.
Initialize FAQ Provider import StringBoot from '@stringboot/web-sdk' ; // After initializing StringBoot, initialize FAQ Provider await StringBoot . FAQ . initialize ({ apiToken: 'YOUR_API_TOKEN' , baseUrl: 'https://api.stringboot.com' , cacheSize: 200 // Optional: default is 200 });
Fetch FAQs // Get all FAQs regardless of tag const allFAQs = await StringBoot . FAQ . getFAQs ({ tag: 'all' , lang: 'en' , allowNetworkFetch: true }); // Get FAQs by specific tag const paymentFAQs = await StringBoot . FAQ . getFAQs ({ tag: 'payments' , lang: 'en' , allowNetworkFetch: true }); // Get FAQs with sub-tag filtering (2-level filtering) const refundFAQs = await StringBoot . FAQ . getFAQs ({ tag: 'payments' , subTags: [ 'refunds' , 'disputes' ], lang: 'en' , allowNetworkFetch: true });
React FAQ Integration import { useState , useEffect } from 'react' ; import StringBoot from '@stringboot/web-sdk' ; function FAQSection () { const [ faqs , setFaqs ] = useState ([]); const [ loading , setLoading ] = useState ( true ); useEffect (() => { async function loadFAQs () { // Initialize FAQ Provider first await StringBoot . FAQ . initialize ({ apiToken: 'YOUR_API_TOKEN' , baseUrl: 'https://api.stringboot.com' }); // Fetch FAQs const fetchedFAQs = await StringBoot . FAQ . getFAQs ({ tag: 'all' , lang: 'en' , allowNetworkFetch: true }); setFaqs ( fetchedFAQs ); setLoading ( false ); } loadFAQs (); }, []); if ( loading ) return < div > Loading FAQs... </ div > ; return ( < div > { faqs . map ( faq => ( < div key = { faq . id } > < h3 > { faq . question } </ h3 > < p dangerouslySetInnerHTML = { { __html: faq . answer } } /> < span className = "tag" > { faq . tag } </ span > </ div > )) } </ div > ); }
Key FAQ Features:
2-level filtering : Mandatory tag + optional sub-tags“All” tag : Use tag: 'all' to fetch entire catalogOffline-first : Memory → IndexedDB → NetworkMulti-language : Automatic fallback to EnglishDelta sync : Only downloads changed FAQs Step 5: Test It Out!
Run your development server :
Open browser console - look for Stringboot logs:[StringBoot] Initializing... [StringBoot] ✅ Sync complete: 42 strings loaded [StringBoot] Current language: en
Verify strings appear in your UI
Test language switching (if implemented)
Next Steps
React Integration Deep dive into React hooks and components.
Vue Integration Learn about Vue composition API support.
Advanced Usage Performance, A/B Testing, and more.
Troubleshooting Resolve common integration issues.
