Indent fabric-core

The Indent component increases the indentation level for child content in generated code. Use with Dedent to control code block formatting.

Use Indent when: You need to increase indentation inside functions, if statements, or code blocks.

Perfect for: Formatting function bodies, nested code blocks, conditional statements.

NOTE

This is the Fabric Core version. In React Fabric, use the <indent /> JSX element instead.

Usage

run.ts

import { createFabric, Fabric, Indent, Dedent, Br } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()
fabric.use(fsxPlugin)

const component = Fabric().children([
  'function example() {',
  Br(),
  Indent(),
  'return true',
  Br(),
  Dedent(),
  '}'
])

const output = await fabric.render(component)

output

function example() {
  return true
}

Props

This component accepts no props.

Examples

Control Nested Indentation

run.ts

import { createFabric, createComponent, Indent, Dedent, Br } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()
fabric.use(fsxPlugin)

const component =  createComponent('component', ()=>{
  return [
    'if (condition) {',
    Br(),
    Indent(),
    'if (nested) {',
    Br(),
    Indent(),
    'doSomething()',
    Br(),
    Dedent(),
    '}',
    Br(),
    Dedent(),
    '}'
  ]
})

const output = await fabric.render(component())

output

if (condition) {
  if (nested) {
    doSomething()
  }
}

With Function Component

run.ts

import { createFabric, Fabric, Indent, Dedent, Br } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()
fabric.use(fsxPlugin)

const component = Fabric().children([
  'class Example {',
  Br(),
  Indent(),
  'constructor() {',
  Br(),
  Indent(),
  'this.value = 0',
  Br(),
  Dedent(),
  '}',
  Br(),
  Dedent(),
  '}'
])

const output = await fabric.render(component)

output

class Example {
  constructor() {
    this.value = 0
  }
}

See Also

• Dedent - Decrease indentation
• Br - Line breaks
• Function - Function declarations