### Start Example Dev Server

Source: https://github.com/tanstack/template/blob/main/CONTRIBUTING.md

When working within an example directory, use this command to start its development server. Dependencies are managed by the root Nx setup.

```bash
pnpm start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/tanstack/template/blob/main/CONTRIBUTING.md

Run this command to install project dependencies and linkages using pnpm.

```bash
pnpm install
```

--------------------------------

### Install TanStack Template Packages

Source: https://context7.com/tanstack/template/llms.txt

Install the core, React, Solid, or devtools packages using npm or pnpm.

```bash
# Core (framework-agnostic)
npm install @tanstack/template
# or
pnpm add @tanstack/template

# React adapter
npm install @tanstack/react-template

# Solid adapter
npm install @tanstack/solid-template

# React devtools (optional)
npm install @tanstack/react-template-devtools

# Solid devtools (optional)
npm install @tanstack/solid-template-devtools
```

--------------------------------

### Start Development Server

Source: https://github.com/tanstack/template/blob/main/CONTRIBUTING.md

Use this command to auto-build and auto-test files as you edit them during development.

```bash
pnpm dev
```

--------------------------------

### Install TanStack Solid Devtools

Source: https://github.com/tanstack/template/blob/main/docs/installation.md

Install the Solid Devtools for TanStack Template using npm.

```bash
npm install @tanstack/solid-template-devtools
```

--------------------------------

### Install TanStack React Devtools

Source: https://github.com/tanstack/template/blob/main/docs/installation.md

Install the React Devtools for TanStack Template using npm.

```bash
npm install @tanstack/react-template-devtools
```

--------------------------------

### Install TanStack Solid Template

Source: https://github.com/tanstack/template/blob/main/docs/installation.md

Use npm, pnpm, or yarn to install the TanStack Solid Template package.

```bash
npm install @tanstack/solid-template
# or
pnpm add @tanstack/solid-template
# or
yarn add @tanstack/solid-template
```

--------------------------------

### Package Structure Overview

Source: https://github.com/tanstack/template/blob/main/TEMPLATE_GUIDE.md

Illustrates the directory structure of the TanStack template, highlighting the core library, framework adapters, devtools, examples, and documentation.

```bash
template/
├── packages/
│   ├── template/                    # Core library (framework-agnostic)
│   ├── react-template/              # React adapter
│   ├── solid-template/              # Solid adapter
│   ├── template-devtools/           # Base devtools
│   ├── react-template-devtools/     # React devtools
│   └── solid-template-devtools/     # Solid devtools
├── examples/                         # Example applications
├── docs/                            # Documentation
├── scripts/                         # Build and doc scripts
└── .github/                         # CI/CD workflows
```

--------------------------------

### Install TanStack Template Core Package

Source: https://github.com/tanstack/template/blob/main/docs/installation.md

Use npm, pnpm, or yarn to install the core TanStack Template package.

```bash
npm install @tanstack/template
# or
pnpm add @tanstack/template
# or
yarn add @tanstack/template
```

--------------------------------

### Install TanStack React Template

Source: https://github.com/tanstack/template/blob/main/docs/installation.md

Use npm, pnpm, or yarn to install the TanStack React Template package.

```bash
npm install @tanstack/react-template
# or
pnpm add @tanstack/react-template
# or
yarn add @tanstack/react-template
```

--------------------------------

### TanStack Template Development Commands

Source: https://github.com/tanstack/template/blob/main/README.md

These commands are used for managing the TanStack Template project, including installation, building, testing, linting, formatting, documentation generation, and watching for changes.

```bash
pnpm install
pnpm build:all
pnpm test:lib
pnpm test:pr
pnpm lint:all
pnpm format
pnpm generate-docs
pnpm watch
```

--------------------------------

### Testing React Hooks with Vitest

Source: https://context7.com/tanstack/template/llms.txt

Tests React hooks using `@testing-library/react` and Vitest. Ensure `@testing-library/react` is installed for this snippet to work.

```tsx
import { describe, it, expect } from 'vitest'
import { renderHook } from '@testing-library/react'
import { useTemplate } from '@tanstack/react-template'
import { createTemplate } from '@tanstack/template'

describe('useTemplate', () => {
  it('returns default message when no options provided', () => {
    const template = createTemplate()
    const { result } = renderHook(() => useTemplate(template))

    expect(result.current).toBeDefined()
    expect(result.current.message).toBe('Hello')
  })

  it('returns custom message from TemplateOptions', () => {
    const template = createTemplate({ message: 'Custom' })
    const { result } = renderHook(() => useTemplate(template))

    expect(result.current.message).toBe('Custom')
  })
})
```

--------------------------------

### Build Project

Source: https://github.com/tanstack/template/blob/main/CONTRIBUTING.md

Use this command to build the project. This is typically used in conjunction with 'pnpm dev' for watching changes.

```bash
pnpm build
```

--------------------------------

### Create a Changeset

Source: https://github.com/tanstack/template/blob/main/CONTRIBUTING.md

Run this command to create a changelog entry for your changes.

```bash
pnpm changeset
```

--------------------------------

### `createTemplate(options?)` - Core factory function

Source: https://context7.com/tanstack/template/llms.txt

Creates and returns a new `Template` instance using a factory function. This is the recommended way to instantiate the core class. It accepts an optional `TemplateOptions` object with a `message` string, defaulting to 'Hello' if omitted.

```APIDOC
## `createTemplate(options?)` - Core factory function

### Description
Creates and returns a new `Template` instance. This is the recommended way to instantiate the core class. Accepts an optional `TemplateOptions` object with a `message` string; defaults to `"Hello"` if omitted.

### Usage
```typescript
import { createTemplate } from '@tanstack/template'

// Default instantiation — message defaults to "Hello"
const template = createTemplate()
template.greet() // Logs: "Hello"

// Custom message
const custom = createTemplate({ message: 'Welcome to TanStack!' })
custom.greet() // Logs: "Welcome to TanStack!"

// Access the underlying reactive store directly
console.log(custom.store.state.message) // "Welcome to TanStack!"
```

### Parameters
#### Options (`TemplateOptions`)
- **message** (string) - Optional - The initial message to be used by the template. Defaults to `"Hello"`.
```

--------------------------------

### Core Usage of createTemplate

Source: https://github.com/tanstack/template/blob/main/docs/quick-start.md

Initialize the template with a message and call the greet method. This is the fundamental way to use the template.

```typescript
import { createTemplate } from '@tanstack/template'

const template = createTemplate({ message: 'Hello!' })
template.greet() // Logs: Hello!
```

--------------------------------

### `new Template(options?)` - Core class constructor

Source: https://context7.com/tanstack/template/llms.txt

Instantiates the `Template` class directly. The `Template` class is the framework-agnostic core, holding a `@tanstack/store` `Store` instance and exposing a `greet()` method. It accepts an optional `TemplateOptions` object.

```APIDOC
## `new Template(options?)` - Core class constructor

### Description
The `Template` class is the framework-agnostic core. It holds a `@tanstack/store` `Store` instance keyed with `{ message: string }` and exposes a `greet()` method that logs the current message to the console.

### Usage
```typescript
import { Template } from '@tanstack/template'
import type { TemplateOptions } from '@tanstack/template'

const options: TemplateOptions = { message: 'Hello from Template class!' }

const template = new Template(options)
// Constructor logs: "Hello from @tanstack/template!"

template.greet()
// Logs: "Hello from Template class!"

// The store is publicly accessible for direct state reads or subscriptions
const unsubscribe = template.store.subscribe(() => {
  console.log('State changed:', template.store.state.message)
})
```

### Parameters
#### Options (`TemplateOptions`)
- **message** (string) - Optional - The initial message to be used by the template. Defaults to `"Hello"`.
```

--------------------------------

### Template Constructor

Source: https://github.com/tanstack/template/blob/main/docs/reference/classes/Template.md

Initializes a new instance of the Template class. Optionally accepts configuration options.

```APIDOC
## Constructor Template

### Description
Initializes a new instance of the Template class.

### Signature
```ts
new Template(options?: TemplateOptions): Template
```

### Parameters
#### options
- **options** (`TemplateOptions`) - Optional - Configuration options for the template instance.
```

--------------------------------

### createTemplate

Source: https://github.com/tanstack/template/blob/main/docs/reference/functions/createTemplate.md

Creates a new template instance with optional configuration.

```APIDOC
## Function: createTemplate()

### Description
Creates a new template instance. It accepts an optional `options` object to configure the template.

### Signature
```ts
function createTemplate(options?: TemplateOptions): Template;
```

### Parameters
#### options
- `options` (TemplateOptions) - Optional - Configuration options for the template.

### Returns
- `Template` - A new instance of the Template.
```

--------------------------------

### Template.greet()

Source: https://github.com/tanstack/template/blob/main/docs/reference/classes/Template.md

Outputs a greeting message. This method is used to display a predefined or dynamic greeting.

```APIDOC
## Method greet

### Description
Outputs a greeting message.

### Signature
```ts
greet(): void
```

### Returns
`void`
```

--------------------------------

### Run All Tests

Source: https://github.com/tanstack/template/blob/main/CONTRIBUTING.md

Execute this command to ensure all tests pass before committing your changes.

```bash
pnpm test
```

--------------------------------

### createTemplateSignal

Source: https://github.com/tanstack/template/blob/main/docs/framework/solid/adapter.md

Connects a Template instance to Solid's reactivity system, returning a Solid signal containing the current state from the template's store.

```APIDOC
## createTemplateSignal

### Description
Connects a Template instance to Solid's reactivity system.

### Parameters
#### Path Parameters
- `template` (Template) - Required - The template instance to connect

### Returns
Returns a Solid signal containing the current state from the template's store.

### Example
```tsx
import { createTemplateSignal } from '@tanstack/solid-template'

function MyComponent() {
  const template = createTemplate()
  const state = createTemplateSignal(template)

  return <div>{state().message}</div>
}
```
```

--------------------------------

### createTemplateSignal(template) — Solid primitive

Source: https://context7.com/tanstack/template/llms.txt

Connects a Template instance to Solid's fine-grained reactivity system. It returns a Solid Accessor (signal) containing the current store state. Access state by calling the returned accessor as a function.

```APIDOC
## `createTemplateSignal(template)` — Solid primitive

Connects a `Template` instance to Solid's fine-grained reactivity system. Internally calls `useSelector` from `@tanstack/solid-store` and returns a Solid `Accessor` (signal) containing the current store state. Access state by calling the returned accessor as a function: `state()`.

```tsx
import { render } from 'solid-js/web'
import { createTemplate } from '@tanstack/template'
import { createTemplateSignal } from '@tanstack/solid-template'

function App() {
  const template = createTemplate({ message: 'Hello from Solid!' })

  // Returns a Solid Accessor<{ message: string }>
  const state = createTemplateSignal(template)

  return (
    <div style={{ padding: '20px', 'font-family': 'sans-serif' }}>
      <h1>TanStack Template</h1>
      {/* Call state() to read the reactive value */}
      <p>Message: {state().message}</p>
      <button onClick={() => template.greet()}>Greet (check console)</button>
    </div>
  )
}

render(() => <App />, document.getElementById('root')!)
// Expected output in browser: "Message: Hello from Solid!"
// On button click, logs: "Hello from Solid!"
```
```

--------------------------------

### Instantiate Template Class with Options

Source: https://context7.com/tanstack/template/llms.txt

Use the `Template` class constructor to create an instance with custom options. The constructor logs a default message.

```typescript
import { Template } from '@tanstack/template'
import type { TemplateOptions } from '@tanstack/template'

const options: TemplateOptions = { message: 'Hello from Template class!' }

const template = new Template(options)
// Constructor logs: "Hello from @tanstack/template!"

template.greet()
// Logs: "Hello from Template class!"

// The store is publicly accessible for direct state reads or subscriptions
const unsubscribe = template.store.subscribe(() => {
  console.log('State changed:', template.store.state.message)
})
```

--------------------------------

### Template Class Greet Method

Source: https://github.com/tanstack/template/blob/main/docs/reference/classes/Template.md

The 'greet' method is available on Template instances. It performs an action but does not return any value.

```typescript
greet(): void;
```

--------------------------------

### Use TanStack Template with Solid

Source: https://context7.com/tanstack/template/llms.txt

Connects a Template instance to Solid's reactivity system using `createTemplateSignal`. Returns a Solid Accessor (signal) containing the current store state. Access state by calling the returned accessor as a function: `state()`. Requires Solid and `@tanstack/solid-template`.

```tsx
import { render } from 'solid-js/web'
import { createTemplate } from '@tanstack/template'
import { createTemplateSignal } from '@tanstack/solid-template'

function App() {
  const template = createTemplate({ message: 'Hello from Solid!' })

  // Returns a Solid Accessor<{ message: string }>
  const state = createTemplateSignal(template)

  return (
    <div style={{ padding: '20px', 'font-family': 'sans-serif' }}>
      <h1>TanStack Template</h1>
      {/* Call state() to read the reactive value */}
      <p>Message: {state().message}</p>
      <button onClick={() => template.greet()}>Greet (check console)</button>
    </div>
  )
}

render(() => <App />, document.getElementById('root')!)
// Expected output in browser: "Message: Hello from Solid!"
// On button click, logs: "Hello from Solid!"
```

--------------------------------

### Development Workflow Commands

Source: https://github.com/tanstack/template/blob/main/TEMPLATE_GUIDE.md

Common pnpm commands for managing dependencies, building, testing, linting, formatting, and watching the project during development.

```bash
# Install dependencies
pnpm install

# Build all packages
pnpm build:all

# Run tests
pnpm test:lib

# Run linting
pnpm lint
pnpm lint:all
pnpm test:eslint

# Format code
pnpm format

# Generate documentation
pnpm generate-docs

# Watch mode for development
pnpm watch
```

--------------------------------

### Connect Template to Solid Reactivity with createTemplateSignal

Source: https://github.com/tanstack/template/blob/main/docs/framework/solid/adapter.md

Use `createTemplateSignal` to connect a Template instance to Solid's reactivity system. This primitive returns a Solid signal containing the current state from the template's store.

```tsx
import { createTemplateSignal } from '@tanstack/solid-template'

function MyComponent() {
  const template = createTemplate()
  const state = createTemplateSignal(template)

  return <div>{state().message}</div>
}
```

--------------------------------

### Instantiate Template Class

Source: https://github.com/tanstack/template/blob/main/docs/reference/classes/Template.md

Use the constructor to create a new instance of the Template class. Optional options can be provided during instantiation.

```typescript
new Template(options?)
```

--------------------------------

### `TemplateOptions` - Configuration interface

Source: https://context7.com/tanstack/template/llms.txt

The options interface accepted by both the `Template` constructor and the `createTemplate` factory function. All properties are optional.

```APIDOC
## `TemplateOptions` - Configuration interface

### Description
The options interface accepted by both `Template` constructor and `createTemplate`. All properties are optional.

### Usage
```typescript
import { createTemplate } from '@tanstack/template'
import type { TemplateOptions } from '@tanstack/template'

const options: TemplateOptions = {
  message: 'Custom greeting', // optional string, defaults to "Hello"
}

const template = createTemplate(options)
template.greet() // Logs: "Custom greeting"

// Omitting options entirely is valid
const defaultTemplate = createTemplate()
defaultTemplate.greet() // Logs: "Hello"
```

### Properties
- **message** (string) - Optional - The initial message to be used by the template. Defaults to `"Hello"`.
```

--------------------------------

### Create Template Instance with Default Message

Source: https://context7.com/tanstack/template/llms.txt

Use the `createTemplate` factory function for default instantiation. The message defaults to 'Hello'.

```typescript
import { createTemplate } from '@tanstack/template'

// Default instantiation — message defaults to "Hello"
const template = createTemplate()
template.greet() // Logs: "Hello"

// Custom message
const custom = createTemplate({ message: 'Welcome to TanStack!' })
custom.greet() // Logs: "Welcome to TanStack!"

// Access the underlying reactive store directly
console.log(custom.store.state.message) // "Welcome to TanStack!"
```

--------------------------------

### useTemplate()

Source: https://github.com/tanstack/template/blob/main/docs/framework/react/reference/functions/useTemplate.md

The `useTemplate` hook accepts a template object and returns an object with template-related utilities.

```APIDOC
## Function: useTemplate()

### Description
Accepts a `template` object and returns an object.

### Signature
```ts
function useTemplate(template): object;
```

### Parameters
#### template
- **template** (`Template`) - The template object to be used.
```

--------------------------------

### createTemplateSignal

Source: https://github.com/tanstack/template/blob/main/docs/framework/solid/reference/functions/createTemplateSignal.md

Creates a SolidJS signal from a template. This function takes a template as input and returns an accessor to the signal's value.

```APIDOC
## Function: createTemplateSignal()

### Signature
```ts
function createTemplateSignal(template): Accessor<NoInfer<{
}>>;
```

### Parameters
#### template
- `template` (Template) - The template to create a signal from.

### Returns
- `Accessor` - An accessor to the signal's value.
```

--------------------------------

### Use TanStack Template with React

Source: https://context7.com/tanstack/template/llms.txt

Connects a Template instance to React's rendering cycle using `useTemplate`. Subscribes to the template's store, causing re-renders on state changes. Requires React and `@tanstack/react-template`.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createTemplate } from '@tanstack/template'
import { useTemplate } from '@tanstack/react-template'

function App() {
  // Stabilize the Template instance across renders with useMemo
  const template = React.useMemo(
    () => createTemplate({ message: 'Hello from React!' }),
    [],
  )

  // Subscribe to reactive state — re-renders on store changes
  const state = useTemplate(template)

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>TanStack Template</h1>
      <p>Message: {state.message}</p>
      {/* template.greet() logs state.message to the console */}
      <button onClick={() => template.greet()}>Greet (check console)</button>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
// Expected output in browser: "Message: Hello from React!"
// On button click, logs: "Hello from React!"
```

--------------------------------

### React Usage with useTemplate

Source: https://github.com/tanstack/template/blob/main/docs/quick-start.md

Integrate the template into a React application using the useTemplate hook. Ensure the template instance is memoized for performance.

```tsx
import { createTemplate } from '@tanstack/template'
import { useTemplate } from '@tanstack/react-template'

function App() {
  const template = React.useMemo(() => createTemplate(), [])
  const state = useTemplate(template)

  return <div>{state.message}</div>
}
```

--------------------------------

### useTemplate Hook

Source: https://github.com/tanstack/template/blob/main/docs/framework/react/adapter.md

The `useTemplate` hook connects a Template instance to React's reactivity system, returning the current state from the template's store.

```APIDOC
## useTemplate

### Description
The `useTemplate` hook connects a Template instance to React's reactivity system.

### Parameters

- `template` (Template) - The template instance to connect

### Returns

Returns the current state from the template's store.

### Usage Example

```tsx
import { useTemplate } from '@tanstack/react-template'

function MyComponent() {
  const template = React.useMemo(() => createTemplate(), [])
  const state = useTemplate(template)

  return <div>{state.message}</div>
}
```
```

--------------------------------

### TemplateDevtools — Solid devtools component

Source: https://context7.com/tanstack/template/llms.txt

A Solid component from `@tanstack/solid-template-devtools` that renders a devtools panel, mirroring the React devtools package in API and placement pattern.

```APIDOC
## `TemplateDevtools` — Solid devtools component

A Solid component from `@tanstack/solid-template-devtools` that renders a devtools panel. Mirrors the React devtools package in API and placement pattern.

```tsx
import { render } from 'solid-js/web'
import { createTemplate } from '@tanstack/template'
import { createTemplateSignal } from '@tanstack/solid-template'
import { TemplateDevtools } from '@tanstack/solid-template-devtools'

function App() {
  const template = createTemplate({ message: 'Hello from Solid with Devtools!' })
  const state = createTemplateSignal(template)

  return (
    <div style={{ padding: '20px', 'font-family': 'sans-serif' }}>
      <h1>TanStack Template — Solid Devtools Example</h1>
      <p>Message: {state().message}</p>
      <button onClick={() => template.greet()}>Greet (check console)</button>

      <hr style={{ margin: '20px 0' }} />

      <h2>Devtools:</h2>
      {/* Renders the devtools panel below your app content */}
      <TemplateDevtools />
    </div>
  )
}

render(() => <App />, document.getElementById('root')!)
```
```

--------------------------------

### TanStack Template Solid Devtools

Source: https://context7.com/tanstack/template/llms.txt

Integrates `TemplateDevtools` component from `@tanstack/solid-template-devtools` to render a devtools panel for the Template library within a Solid application. This component mirrors the React devtools package in API and placement pattern.

```tsx
import { render } from 'solid-js/web'
import { createTemplate } from '@tanstack/template'
import { createTemplateSignal } from '@tanstack/solid-template'
import { TemplateDevtools } from '@tanstack/solid-template-devtools'

function App() {
  const template = createTemplate({ message: 'Hello from Solid with Devtools!' })
  const state = createTemplateSignal(template)

  return (
    <div style={{ padding: '20px', 'font-family': 'sans-serif' }}>
      <h1>TanStack Template — Solid Devtools Example</h1>
      <p>Message: {state().message}</p>
      <button onClick={() => template.greet()}>Greet (check console)</button>

      <hr style={{ margin: '20px 0' }} />

      <h2>Devtools:</h2>
      {/* Renders the devtools panel below your app content */}
      <TemplateDevtools />
    </div>
  )
}

render(() => <App />, document.getElementById('root')!)
```

--------------------------------

### SolidJS Usage with createTemplateSignal

Source: https://github.com/tanstack/template/blob/main/docs/quick-start.md

Integrate the template into a SolidJS application using the createTemplateSignal function. This hook provides reactive state management for the template.

```tsx
import { createTemplate } from '@tanstack/template'
import { createTemplateSignal } from '@tanstack/solid-template'

function App() {
  const template = createTemplate()
  const state = createTemplateSignal(template)

  return <div>{state().message}</div>
}
```

--------------------------------

### TemplateOptions Interface

Source: https://github.com/tanstack/template/blob/main/docs/reference/interfaces/TemplateOptions.md

This interface defines the structure for template options, which can include an optional message string.

```APIDOC
## Interface: TemplateOptions

### Description
Defines configuration options for templates.

### Properties

#### message
- **message** (string) - Optional - An optional message string that can be included in the template.
```

--------------------------------

### Use Template Hook in React

Source: https://github.com/tanstack/template/blob/main/docs/framework/react/adapter.md

Connects a Template instance to React's reactivity system. Use this hook to access and display the template's state within your React components.

```tsx
import { useTemplate } from '@tanstack/react-template'

function MyComponent() {
  const template = React.useMemo(() => createTemplate(), [])
  const state = useTemplate(template)

  return <div>{state.message}</div>
}
```

--------------------------------

### Configure Template with TemplateOptions Interface

Source: https://context7.com/tanstack/template/llms.txt

The `TemplateOptions` interface allows configuring the `message` property. Omitting options is valid and uses default values.

```typescript
import { createTemplate } from '@tanstack/template'
import type { TemplateOptions } from '@tanstack/template'

const options: TemplateOptions = {
  message: 'Custom greeting', // optional string, defaults to "Hello"
}

const template = createTemplate(options)
template.greet() // Logs: "Custom greeting"

// Omitting options entirely is valid
const defaultTemplate = createTemplate()
defaultTemplate.greet() // Logs: "Hello"
```

--------------------------------

### useTemplate(template) — React hook

Source: https://context7.com/tanstack/template/llms.txt

Connects a Template instance to React's rendering cycle. It subscribes to the template's store and causes the component to re-render whenever state changes. Returns the current store state object.

```APIDOC
## `useTemplate(template)` — React hook

Connects a `Template` instance to React's rendering cycle. Internally calls `useSelector` from `@tanstack/react-store` to subscribe to the template's store, causing the component to re-render whenever state changes. Returns the current store state object `{ message: string }`.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createTemplate } from '@tanstack/template'
import { useTemplate } from '@tanstack/react-template'

function App() {
  // Stabilize the Template instance across renders with useMemo
  const template = React.useMemo(
    () => createTemplate({ message: 'Hello from React!' }),
    [],
  )

  // Subscribe to reactive state — re-renders on store changes
  const state = useTemplate(template)

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>TanStack Template</h1>
      <p>Message: {state.message}</p>
      {/* template.greet() logs state.message to the console */}
      <button onClick={() => template.greet()}>Greet (check console)</button>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
// Expected output in browser: "Message: Hello from React!"
// On button click, logs: "Hello from React!"
```
```

--------------------------------

### useTemplate Hook Signature

Source: https://github.com/tanstack/template/blob/main/docs/framework/react/reference/functions/useTemplate.md

This is the TypeScript signature for the `useTemplate` hook. It takes a `template` object as an argument and returns an object.

```typescript
function useTemplate(template): object;
```

--------------------------------

### Template Class Store Property

Source: https://github.com/tanstack/template/blob/main/docs/reference/classes/Template.md

The 'store' property holds the state for the Template instance, which is an object with a 'message' string property.

```typescript
store: Store<{
  message: string;
}>;
```

--------------------------------

### TemplateOptions Interface Definition

Source: https://github.com/tanstack/template/blob/main/docs/reference/interfaces/TemplateOptions.md

Defines the structure for template options, including an optional message property.

```typescript
optional message: string;
```

--------------------------------

### SolidJS Devtools Integration

Source: https://github.com/tanstack/template/blob/main/docs/quick-start.md

Add the TemplateDevtools component to your SolidJS application for enhanced debugging capabilities. This component allows you to inspect the template's state in real-time.

```tsx
import { TemplateDevtools } from '@tanstack/solid-template-devtools'

function App() {
  // ... your code

  return (
    <div>
      {/* your app */}
      <TemplateDevtools />
    </div>
  )
}
```

--------------------------------

### TanStack Template React Devtools

Source: https://context7.com/tanstack/template/llms.txt

Integrates `TemplateDevtools` component from `@tanstack/react-template-devtools` to render a devtools panel for the Template library within a React application. This component displays debug UI for the template state.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createTemplate } from '@tanstack/template'
import { useTemplate } from '@tanstack/react-template'
import { TemplateDevtools } from '@tanstack/react-template-devtools'

function App() {
  const template = React.useMemo(
    () => createTemplate({ message: 'Hello from React with Devtools!' }),
    [],
  )
  const state = useTemplate(template)

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>TanStack Template — React Devtools Example</h1>
      <p>Message: {state.message}</p>
      <button onClick={() => template.greet()}>Greet (check console)</button>

      <hr style={{ margin: '20px 0' }} />

      <h2>Devtools:</h2>
      {/* Renders the devtools panel below your app content */}
      <TemplateDevtools />
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
```

--------------------------------

### TemplateDevtools — React devtools component

Source: https://context7.com/tanstack/template/llms.txt

A React component from `@tanstack/react-template-devtools` that renders a devtools panel for the Template library, useful for debugging.

```APIDOC
## `TemplateDevtools` — React devtools component

A React component from `@tanstack/react-template-devtools` that renders a devtools panel for the Template library. In the template this is a placeholder `<div>` ready to be filled with debug UI.

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createTemplate } from '@tanstack/template'
import { useTemplate } from '@tanstack/react-template'
import { TemplateDevtools } from '@tanstack/react-template-devtools'

function App() {
  const template = React.useMemo(
    () => createTemplate({ message: 'Hello from React with Devtools!' }),
    [],
  )
  const state = useTemplate(template)

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>TanStack Template — React Devtools Example</h1>
      <p>Message: {state.message}</p>
      <button onClick={() => template.greet()}>Greet (check console)</button>

      <hr style={{ margin: '20px 0' }} />

      <h2>Devtools:</h2>
      {/* Renders the devtools panel below your app content */}
      <TemplateDevtools />
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
```
```

--------------------------------

### React Devtools Integration

Source: https://github.com/tanstack/template/blob/main/docs/quick-start.md

Include the TemplateDevtools component in your React application to enable debugging and inspection of the template's state.

```tsx
import { TemplateDevtools } from '@tanstack/react-template-devtools'

function App() {
  // ... your code

  return (
    <div>
      {/* your app */}
      <TemplateDevtools />
    </div>
  )
}
```

--------------------------------

### createTemplateSignal Function Signature

Source: https://github.com/tanstack/template/blob/main/docs/framework/solid/reference/functions/createTemplateSignal.md

This is the TypeScript signature for the createTemplateSignal function. It indicates that the function accepts a 'template' argument of type 'Template' and returns an 'Accessor' to a value of type 'NoInfer<{}>'.

```typescript
function createTemplateSignal(template): Accessor<NoInfer<{
}>>;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.