Case transformation — guide #

A clean, focused reference for the case transformation helpers available in Lokio CLI templates.

Overview #

Lokio offers 16 case transformation helpers that you can use inside templates and output paths. Each helper accepts input in any common format (spaces, camelCase, kebab-case, snake_case, PascalCase, etc.) and converts it to the requested case.

Quick reference #

Helper	Input: `"my button"`	Input: `"MyButton"`	Use case
`capitalize()`	`My button`	`Mybutton`	First letter uppercase
`camelCase()`	`myButton`	`myButton`	Variables, functions
`pascalCase()`	`MyButton`	`MyButton`	Classes, components, types
`kebabCase()`	`my-button`	`my-button`	CSS classes, file names, URLs
`snakeCase()`	`my_button`	`my_button`	DB columns, Python, env vars
`constantCase()`	`MY_BUTTON`	`MY_BUTTON`	Constants, env vars
`dotCase()`	`my.button`	`my.button`	Config keys, object paths
`pathCase()`	`my/button`	`my/button`	File paths, routes
`titleCase()`	`My Button`	`My Button`	Headings, display text
`sentenceCase()`	`My button`	`My button`	Descriptions, labels
`noSpace()`	`mybutton`	`mybutton`	Package names, identifiers
`lowercase()`	`my button`	`mybutton`	Lowercase as-is
`uppercase()`	`MY BUTTON`	`MYBUTTON`	Uppercase as-is
`plural()`	`my buttons`	-	Collection names
`singular()`	`my button`	-	Single item type names
`fileNameCase()`	`myButton`	`myButton`	File names (alias of `camelCase`)

Automatic detection #

Lokio will auto-detect a simple convention from the first character of a variable name:

<%= name %>              # lowercase: "button"
<%= Name %>              # Capitalize: "Button" (auto-detect)

How it works:

variable starting with lowercase → treated as-is
variable starting with uppercase → automatically capitalized

Helper details (examples)#

capitalize()#

Uppercase the first letter; leave the remainder lowercase.

<%= capitalize(name) %>      # "Button" from "button"
<%= capitalize("my button") %>  # "My button"

camelCase()#

Convert to camelCase. Works with any input format.

<%= camelCase("my button") %>    # "myButton"
<%= camelCase("my-button") %>    # "myButton"
<%= camelCase("my_button") %>    # "myButton"
<%= camelCase("MyButton") %>     # "myButton"

Usage example:

const <%= camelCase(name) %> = () => {};

pascalCase()#

Convert to PascalCase.

<%= pascalCase("my button") %>   # "MyButton"
<%= pascalCase("my-button") %>   # "MyButton"
<%= pascalCase("my_button") %>   # "MyButton"

Usage:

export const <%= pascalCase(name) %> = () => {};
interface <%= pascalCase(name) %>Props {}

kebabCase()#

Convert to kebab-case. Useful for CSS, URLs and filenames.

<%= kebabCase("my button") %>    # "my-button"
<%= kebabCase("MyButton") %>     # "my-button"
<%= kebabCase("myButton") %>     # "my-button"

Usage (CSS / file naming):

<div className="<%= kebabCase(name) %>-container">
  <!-- Result: "my-button-container" -->
</div>
 
// Output example:
// output: "src/components/<%= kebabCase(name) %>.tsx"
// Result: "src/components/my-button.tsx"

snakeCase()#

Convert to snake_case. Common for databases and Python.

<%= snakeCase("my button") %>    # "my_button"
<%= snakeCase("MyButton") %>     # "my_button"

Usage:

const TABLE_NAME = "<%= snakeCase(name) %>";
// Result: "my_button"

constantCase()#

Convert to CONSTANT_CASE, suitable for constants and env vars.

<%= constantCase("my button") %> # "MY_BUTTON"
<%= constantCase("MyButton") %>  # "MY_BUTTON"

Usage:

export const <%= constantCase(name) %> = "value";
// Result: export const MY_BUTTON = "value";
 
const ENV_KEY = "<%= constantCase(name) %>_API_KEY";
// Result: "MY_BUTTON_API_KEY"

dotCase(), pathCase(), titleCase(), sentenceCase(), noSpace(), lowercase(), uppercase()#

All helpers follow the same principle: normalize input then convert to the requested casing. Refer to the quick reference table above for short examples.

plural() / singular()#

Best-effort English pluralization and singularization helpers. Useful for generating collection or resource names.

<%= plural("button") %>          # "buttons"
<%= singular("buttons") %>       # "button"

Chaining helpers #

Helpers can be combined:

// Plural + PascalCase
<%= pascalCase(plural(name)) %>
 
// Kebab + Plural
<%= kebabCase(plural(name)) %>
 
// Constant + Singular
<%= constantCase(singular(name)) %>

Examples #

Input: name = "my button"

<%= name %>                  # "my button"
<%= Name %>                  # "My button" (auto)
<%= capitalize(name) %>      # "My button"
<%= camelCase(name) %>       # "myButton"
<%= pascalCase(name) %>      # "MyButton"
<%= kebabCase(name) %>       # "my-button"
<%= snakeCase(name) %>       # "my_button"
<%= constantCase(name) %>    # "MY_BUTTON"
<%= dotCase(name) %>         # "my.button"
<%= pathCase(name) %>        # "my/button"
<%= titleCase(name) %>       # "My Button"
<%= sentenceCase(name) %>    # "My button"
<%= noSpace(name) %>         # "mybutton"
<%= lowercase(name) %>       # "my button"
<%= uppercase(name) %>       # "MY BUTTON"
<%= plural(name) %>          # "my buttons"

Common patterns (quick)#

React component

interface <%= pascalCase(name) %>Props { className?: string; }
export const <%= pascalCase(name) %>: React.FC<<%= pascalCase(name) %>Props> = ({ className }) => (
  <div className={`<%= kebabCase(name) %>-container ${className ?? ""}`}>
    <h1><%= titleCase(name) %></h1>
  </div>
);

REST example (route)

// Route: /api/<%= kebabCase(plural(name)) %>
export async function get<%= pascalCase(plural(name)) %>(): Promise<<%= pascalCase(name) %>[]> {
  const response = await fetch("/api/<%= kebabCase(plural(name)) %>");
  return response.json();
}

File naming examples:

# kebab-case filename
output: "src/components/<%= kebabCase(name) %>.tsx"
# PascalCase filename
output: "src/components/<%= pascalCase(name) %>.tsx"
# snake_case filename
output: "src/models/<%= snakeCase(name) %>.py"

Best practices #

Use the case that matches the target context (components, variables, filenames, DB columns).
Chain helpers for complex needs (e.g., kebabCase(plural(name))).
Be consistent across the project; pick a naming convention and stick to it.

Tips & notes #

Helpers normalize input, so most common input formats work.
plural/singular follow English rules (best-effort).

Troubleshooting #

Case not changing? Check the variable name (<%= Name %> vs <%= name %>) and ensure the value is a string.
Unexpected output? Try a simple input and verify which helper you're using.

See Troubleshooting for more.

Template Syntax

Case transformation — guide##

Overview##

Quick reference##

Automatic detection##

Helper details (examples)##

capitalize()##

camelCase()##

pascalCase()##

kebabCase()##

snakeCase()##

constantCase()##

dotCase(), pathCase(), titleCase(), sentenceCase(), noSpace(), lowercase(), uppercase()##

plural() / singular()##

Chaining helpers##

Examples##

Common patterns (quick)##

Best practices##

Tips & notes##

Troubleshooting##

Case transformation — guide #

Overview #

Quick reference #

Automatic detection #

Helper details (examples)#

capitalize()#

camelCase()#

pascalCase()#

kebabCase()#

snakeCase()#

constantCase()#

dotCase(), pathCase(), titleCase(), sentenceCase(), noSpace(), lowercase(), uppercase()#

plural() / singular()#

Chaining helpers #

Examples #

Common patterns (quick)#

Best practices #

Tips & notes #

Troubleshooting #