Modern web architecture rarely relies on static HTML. Content is injected via JavaScript, fetched via APIs, or rendered client-side using frameworks like React or Vue. MultiLipi is engineered to handle this "Volatile DOM." Our script does not just translate the page once on load; it establishes a persistent MutationObserver to detect and translate new nodes as they are injected into the DOM tree.
This guide explains how our infrastructure handles dynamic payloads, AJAX requests, and interactive states.
1. The Challenge of "Volatile" Content
Standard translation proxies fail when content changes after the initial load.
MultiLipi supports:
Asiakaspuolen renderöinti (CSR)
Apps built on React, Vue, Angular, or Svelte.
Asynchronous Fetches
Content loaded via AJAX/Fetch APIs (e.g., infinite scroll or search results).
Interactive States
Form validation errors, cart totals, and notification toasts.
2. The Engineering Architecture
How we translate without breaking your app.
Our JavaScript engine runs a continuous monitoring process on the client side:
DOM Observation:
MutationObserverWe utilize the browser's native MutationObserver API to watch for changes in the <body>.
Detection:
<div>When your app injects a new <div> (e.g., opening a modal), our observer flags it immediately.
Instant Injection:
< 50msThe text is sent to our local cache or API. If a translation exists in the memory, it is swapped instantly (often in under 50ms), appearing seamless to the user.
State Preservation:
text nodes onlyWe only modify text nodes. We do not destroy DOM elements or strip event listeners, ensuring your React/Vue bindings remain intact.
3. Best Practices for Dynamic Text
To ensure the MutationObserver works efficiently, follow these architectural guidelines:
Stable Text Nodes
Avoid strings that change every second (like a countdown timer: "00:01", "00:02"). This floods the translation engine with thousands of unique requests.
Recommended Approach:
<span>Time:</span> <span class="notranslate">00:01</span>
Clean HTML Wrapping
Ensure text is wrapped in specific tags (<p>, <span>, <div>) rather than floating loose in the <body>. This helps the observer isolate the segment.
Best Practice:
<p>Your text here</p> <!-- Good --> Loose text <!-- Bad -->
Avoid "Typing" Effects
Scripts that "type out" text character by character (t... te... tex... text) confuse translation engines. Render the full text string at once.
Implementation Tip:
// Render complete text instead of character-by-character animation
<p>{fullText}</p>4. Edge Case: iFrames
A note on cross-origin limitations.
If your dynamic content lives inside an iFrame (e.g., a third-party chat widget or payment gateway):
Same Origin:
If the iFrame is hosted on your domain, MultiLipi can translate it.
Cross Origin:
If the iFrame loads from an external domain (e.g., Stripe, Intercom), we cannot translate it due to browser security policies (CORS).
You must configure translation settings within that third-party tool directly.
Yhteenveto
You do not need to install specific SDKs for React or Angular. Once the MultiLipi script is active, it automatically hooks into the browser's rendering engine to translate any content—static or dynamic—that appears on the screen.