Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.triglit.com/llms.txt

Use this file to discover all available pages before exploring further.

​
Exemplo Básico

import { TriglitProvider, WorkflowEditor } from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';

function App() {
  return (
    <TriglitProvider config={{ apiKey: 'pk_...' }}>
      <div className="h-screen">
        <WorkflowEditor 
          workflowId="wf_123"
          onSave={(versionId) => {
            alert(`Versão ${versionId} salva com sucesso!`);
          }}
        />
      </div>
    </TriglitProvider>
  );
}

​
Exemplo com Customização

import {
  TriglitProvider,
  WorkflowEditor,
} from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';
import { toast } from 'sonner'; // ou sua biblioteca de toast

function App() {
  return (
    <TriglitProvider
      config={{
        apiKey: 'pk_...',
        i18n: {
          locale: 'pt-BR',
        },
        callbacks: {
          onWorkflowVersionCreated: (version) => {
            toast.success('Versão criada com sucesso!');
          },
          onWorkflowVersionPublished: () => {
            toast.success('Versão publicada!');
          },
          onWorkflowVersionCreateError: (error) => {
            toast.error(`Erro: ${error.message}`);
          },
        },
      }}
    >
      <WorkflowEditor workflowId="wf_123" />
    </TriglitProvider>
  );
}

​
Troubleshooting

​
Estilos não aparecem

Certifique-se de importar o CSS: 
import '@triglit/react-sdk/styles.css';

​
Erro de autenticação

Verifique se a chave de API está correta e se está usando o tipo correto (pk_ para frontend, sk_ para backend).

​
Componentes não renderizam

Certifique-se de que o TriglitProvider envolve todos os componentes do SDK.

​
Problemas com TypeScript

O SDK é totalmente tipado. Se você encontrar erros de tipo, verifique se está usando a versão mais recente: 
npm update @triglit/react-sdk