FlowToken

Memory Optimization

To reduce the memory footprint when handling long chat histories, set the animation prop to null for messages that have already completed streaming.

Tailwind CSS Integration

If you are using Tailwind CSS to style your generated markdown, you must install @tailwindcss/typography.

Add the following classes to your AnimatedMarkdown container to ensure correct styling: prose lg:prose-md prose-pre:p-0 prose-pre:m-0 prose-pre:bg-transparent

If the built-in animations are insufficient, you can define your own keyframes in CSS. Wrap your animation in a class and pass that class name to the animation prop of AnimatedMarkdown.

/* custom-styles.css */
@keyframes custom-animation {
  from { opacity: 0; }
  to { opacity: 1; }
}

.custom-animation {
  animation: custom-animation 1s ease-in-out;
}

import 'custom-styles.css';

<AnimatedMarkdown content="Hello, world!" animation="custom-animation" />

The AnimatedMarkdown component is the primary way to render text (including Markdown) with smooth animations. You must import the library's CSS file to enable the animations.

To use it, pass the text content to the content prop and specify an animation name.

import React from 'react';
import { AnimatedMarkdown } from 'flowtoken';
// Required for animations to work
import 'flowtoken/dist/styles.css';

const App = () => {
  return (
    <AnimatedMarkdown
      content="## Hello, world!"
      animation="fadeIn"
      animationDuration="0.5s"
      animationTimingFunction="ease-in-out"
    />
  );
};

export default App;

Install the flowtoken package using npm or yarn to start using the animated markdown components in your React project.

npm install flowtoken
# or
yarn add flowtoken

You can extend AnimatedMarkdown to render custom React components when the LLM outputs specific XML-like tags. Pass a customComponents object where the key is the tag name and the value is a React component.

To ensure the text inside your custom component is also animated, use the animateText function provided in the component's props.

const customComponents = {
  'customcomponent': ({ animateText, node, children, ...props }: any) => {
    return (
      <>
        {animateText(<div {...props}>{children}</div>)}
      </>
    )
  },
}

<AnimatedMarkdown 
  content="Hello, world! <customcomponent>This is a custom component</customcomponent>" 
  customComponents={customComponents} 
/>

FlowToken includes several built-in CSS animations:

- fadeIn
- blurIn
- typewriter
- slideInFromLeft
- fadeAndScale
- rotateIn
- bounceIn
- elastic
- highlight
- blurAndSharpen
- dropIn
- slideUp
- wave

The following props are available on the AnimatedMarkdown component:

- content (string): The text to be displayed.
- sep ("word" | "char"): How to split and animate the content. Defaults to "word".
- animation (string | null): Name of the CSS animation to apply (e.g. fadeIn, dropIn). Set to null to disable animations on completed messages.
- animationDuration (string): CSS duration of the animation (e.g. 0.6s).
- animationTimingFunction (string): CSS timing function for the animation (e.g. ease, ease-in-out).
- codeStyle (object): The syntax-highlighter style object to use for code blocks.
- customComponents (Record<string, React.ComponentType>): Map of regex patterns or custom tag names to React components. Use this to render arbitrary LLM-emitted syntax.
- imgHeight (string): Default height for rendered images (e.g. 200px).

The primary component for rendering smooth, animated LLM text streaming is AnimatedMarkdown. It is the main entrypoint for the library and should be used to wrap or render streaming text content to achieve a fluid animation effect.

import { AnimatedMarkdown } from 'flowtoken';