IntroductioninfoGetting StartedConvenient UsageAdvanced UsageExamples
Reactive FormFocus StoreToolbar EllipsisHybrid Modal DialogWord ProcessorHydrationJSXProgrammatic Reactive LayoutRecursive ExampleAnimationDrawerFile SystemThemespaletteHydration
Hydration
Everything on this page was written as one plain object literal - a document - and hydrated into components by the service locator, not built with convenience functions.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Dolor sit amet
- Consectetur adipiscing elit, sed do eiusmod tempor.
- Incididunt ut labore et dolore magna aliqua.
- Ullamco laboris nisi ut aliquip ex ea commodo.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat
- Cupidatat non proident.
- Sunt in culpa qui officia.
- Deserunt mollit anim id est laborum.
Not only HTML: this is a themed widget, asked for the same way as everything else -
The document this page was hydrated from
{
"type": "widget",
"name": "card",
"properties": {
"style": {
"maxWidth": "820px",
"padding": "8px 32px 24px",
"lineHeight": "1.55",
"boxSizing": "border-box"
},
"children": [
{
"type": "htmlElement",
"name": "div",
"properties": {
"children": [
{
"type": "htmlElement",
"name": "h1",
"properties": {
"children": [
"Hydration"
]
}
},
{
"type": "htmlElement",
"name": "p",
"properties": {
"children": [
"Everything on this page was written as ",
{
"type": "htmlElement",
"name": "b",
"properties": {
"style": {
"color": "var(--cascade-accent, #2e86c1)"
},
"children": [
"one plain object literal"
]
}
},
" - a document - and hydrated into components by the service locator, not built with convenience functions."
]
}
},
{
"type": "htmlElement",
"name": "p",
"properties": {
"children": [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
]
}
},
{
"type": "htmlElement",
"name": "h2",
"properties": {
"children": [
"Dolor sit amet"
]
}
},
{
"type": "htmlElement",
"name": "ul",
"properties": {
"children": [
{
"type": "htmlElement",
"name": "li",
"properties": {
"children": [
{
"type": "htmlElement",
"name": "b",
"properties": {
"style": {
"color": "var(--cascade-accent, #2e86c1)"
},
"children": [
"Consectetur"
]
}
},
" adipiscing elit, sed do eiusmod tempor."
]
}
},
{
"type": "htmlElement",
"name": "li",
"properties": {
"children": [
{
"type": "htmlElement",
"name": "b",
"properties": {
"style": {
"color": "var(--cascade-accent, #2e86c1)"
},
"children": [
"Incididunt"
]
}
},
" ut labore et dolore magna aliqua."
]
}
},
{
"type": "htmlElement",
"name": "li",
"properties": {
"children": [
{
"type": "htmlElement",
"name": "b",
"properties": {
"style": {
"color": "var(--cascade-accent, #2e86c1)"
},
"children": [
"Ullamco"
]
}
},
" laboris nisi ut aliquip ex ea commodo."
]
}
}
]
}
},
{
"type": "htmlElement",
"name": "blockquote",
"properties": {
"style": {
"borderLeft": "4px solid var(--cascade-accent, #2e86c1)",
"margin": "16px 0",
"padding": "4px 16px",
"color": "var(--cascade-text-soft, #566473)"
},
"children": [
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
]
}
},
{
"type": "htmlElement",
"name": "h2",
"properties": {
"children": [
"Excepteur sint occaecat"
]
}
},
{
"type": "htmlElement",
"name": "ol",
"properties": {
"children": [
{
"type": "htmlElement",
"name": "li",
"properties": {
"children": [
"Cupidatat non proident."
]
}
},
{
"type": "htmlElement",
"name": "li",
"properties": {
"children": [
"Sunt in culpa qui officia."
]
}
},
{
"type": "htmlElement",
"name": "li",
"properties": {
"children": [
"Deserunt mollit anim id est laborum."
]
}
}
]
}
},
{
"type": "htmlElement",
"name": "p",
"properties": {
"children": [
"Not only HTML: this is a themed widget, asked for the same way as everything else - ",
{
"type": "widget",
"name": "button",
"properties": {
"children": [
"A themed button"
]
}
}
]
}
}
]
}
}
]
}
}