Text Plugin

The Floro Text Plugin is easiest to demonstrate & learn with video (see the tutorial videos below). If you already know how the plugin works, please feel free to continue to the integration instructions.

Integrating Text

We currently have integration documentation and instructions for React and React Native projects. While our React documentation uses Remix and Next for the example apps, most of the logic can be easily ported to any other React or React SSR project. Remix has far better (optimized) SSR support than Next, if you are looking to add support to an Express/React, we would strongly recommend using the Remix Demo for reference.

Despite only having Javascript integration instructions, Floro & the Text Plugin are programming language & runtime agnostic. For custom integrations, you can use the Text Generator we use in both demos or write your own custom generator.

Please use the Demo Repositories to find references to the platform specific APIs.

Features & Benefits

  • Translations, Term Glossary, Translation Memory - Localize your strings, re-use existing translations.
  • Phrase Variables - Use type-safe inputs for interpolation.
  • Rich Text - Use normal rich text features without requiring a DSL or markup that can be automatically translated.
  • Auto-Translate- Use your DeepL key to auto-translate your phrases into all supported DeepL languages.
  • Phrase Translation Diffs - Show the differences when a target phrase is out of date from its source phrase.
  • Conditional Interpolations - Perform conditional logic on inputs (useful for pluralization & gender rules).
  • Auto-Pluralize - Use OpenAI (BYOK) to handle (locale specific) pluralization conditional logic.
  • Auto-Gender Rules - Use OpenAI (BYOK) to handle (locale specific) gender conditional logic.
  • Term-Discovery - Use OpenAI (BYOK) to find glossary terms.
  • LLM Assistance - Fix grammatical errors or adjust tone in translations with ChatGPT.
  • Complex Slugs & Links - HREFs can use input phrase variables. Display values can handle complex interpolation rules.
  • Headless Styling & Content Insertion - Create strings that can render inline-content and adhere to style rules you manage in your code.
  • Test your Strings - Ensure your conditional interpolations work as anticipated across locales.
  • Short Form & Long Form Text - Supports multi-section strings or KV style translations.
  • Real-Time Preview - Preview local string changes live in your (staging/development/production) website or mobile/desktop app. No iframes or weird CORS rules required.
  • Fuzzy Search - Search all phrases in your repository by locale with partial text searching.
  • Open Phrases from Preview - Identify & open phrases in Floro from a live preview session.
  • Bulk Translate/Bulk Pluralize/Bulk Gender Rules - Translate an entire locale (or just the phrases needing updates or missing translations) with one click.
  • Safe Production Live Updates - Setup web-hooks & static analysis to allow for live production string updates without requiring application re-deployment. Code breaking changes will get caught by type-checker in CI/CD but will not be updated from a web-hook.
  • Runtime Independent - Bring your own i18n library. The text plugin assumes nothing about your runtime. Bring your own Date Time/Currency/Numeric conversion tools.
  • Copy Strings Across Repositories - Easily select phrases to be copied from one repository into another Floro Repository.
  • Type Safe - Create your own Type-Safe strings API from a visual editor that translators & other non-engineering functions can work with as well.
  • Plain Text - Every phrase can be rendered to plain text. Features such as content insertion, href values & rich text are omitted or ignored.
  • Optimal SSR/SSG support - Optimized for lowly latent SSR and OTA updates. Avoid common N+1 issues that come up with naive i18n implementations and initial page overloading.

React Native Demo

The React Native demo differs slightly from the web implementation. One key difference is that there isn't a Chrome Extension to communicate with Floro. It is not obvious in the demo but an emulator is not being used to display the mobile application, it is a physical iPhone (the device is on the same wifi-network as my computer though).


Floro Text Plugin Tutorial (1): Install Text Plugin

Floro Text Plugin Tutorial (2): Groups, Phrases, Terms and Translations

Floro Text Plugin Tutorial (3): Phrase Variables

Floro Text Plugin Tutorial (4): Pluralization

Floro Text Plugin Tutorial (5): Gendered Rules

Floro Text Plugin Tutorial (6): Links With Variables

Floro Text Plugin Tutorial (7): Phrase Sections/Long Form Content

Floro Text Plugin Tutorial (8): Chrome Extension

Floro Text Plugin Tutorial (9): Styled Content & Content Variables

Floro Text Plugin Tutorial (10): Developing With Text