Material 3 Rich Text Provider

A customizable rich text blok provider for the Compose SDK using Material 3 components and theming.

Quick start

First, add the dependency to your project:

dependencies {
    implementation("com.storyblok:storyblok-material3:0.2.0")
}

Create a blok provider with pre-configured Material 3 rich text renderers:

@Serializable
@SerialName("article")
class Article(val title: String, val content: RichText.Document) : Component()

val myBlokProvider = blokProvider(
    storyLinkListener = { uuid, anchor -> /* Handle story link clicks */ }
) {
    blok<Article> { article, modifier ->
        Column(modifier) {
            Text(article.title, style = MaterialTheme.typography.headlineLarge)
            RichText(article.content, Modifier.fillMaxWidth())
        }
    }
}

Use with the Storyblok composable inside a MaterialTheme:

@Composable
fun App() {
    MaterialTheme {
        Storyblok(
            accessToken = "YOUR_ACCESS_TOKEN",
            version = Draft,
            blokProvider = myBlokProvider
        ) {
            val story by story<Article>("articles/hello-world").collectAsState(null)
            
            story?.let { Blok(it.content) }
        }
    }
}

Other resources

You can find the full guide to the Material 3 Rich Text Provider inside README.md.

Packages

com.storyblok.compose.provider

common