Skip to main content
NoteEditor is a rich-text clinical documentation widget that lets clinicians write and manage notes directly inside your application. It supports multiple note types — progress notes, discharge summaries, consultation notes, history and physicals, and more — and tracks document status through a configurable lifecycle from preliminary to final to amended. All saves route through a backend proxy you control.
Your ClinikAPI secret key must stay on the server. The NoteEditor widget sends all note content to your proxyUrl. Your backend proxy is responsible for authenticating the author and calling ClinikAPI with your key.

​
Props

​
props.proxyUrl
string
required
URL of your backend proxy endpoint. The widget sends GET requests to load an existing note and POST or PATCH requests to save. Supply a note-specific path (e.g. /api/clinik/notes/note-id) to open an existing note for editing.
​
props.className
string
CSS class name applied to the widget’s root element for layout and theming control.
​
props.onError
(error: Error) => void
Callback invoked when a load or save request to your proxy fails. Use this to notify the clinician and prevent data loss.

​
Proxy setup

Your proxy needs to handle POST to create notes and PATCH to update them. Add a GET handler to support loading existing notes: 
// app/api/clinik/notes/route.ts
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

// POST: create a new clinical note
export async function POST(req: Request) {
  const body = await req.json();
  const { data } = await clinik.notes.create(body);

  return Response.json(data);
}

// app/api/clinik/notes/[id]/route.ts
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

export async function GET(
  req: Request,
  { params }: { params: { id: string } }
) {
  const { data } = await clinik.notes.read(params.id);
  return Response.json(data);
}

export async function PATCH(
  req: Request,
  { params }: { params: { id: string } }
) {
  const body = await req.json();
  const { data } = await clinik.notes.update(params.id, body);
  return Response.json(data);
}
Log the authenticated user’s identity alongside each note save in your proxy. Clinical documentation requires an auditable author trail, and your backend is the right place to capture it.

​
Usage

import { NoteEditor } from '@clinikapi/react';

// Create a new note
export default function NewNotePage() {
  return (
    <NoteEditor
      proxyUrl="/api/clinik/notes"
      onError={(err) => console.error('Note editor error:', err)}
    />
  );
}

// Edit an existing note
export default function EditNotePage({ noteId }: { noteId: string }) {
  return (
    <NoteEditor
      proxyUrl={`/api/clinik/notes/${noteId}`}
      onError={(err) => console.error('Note editor error:', err)}
    />
  );
}

​
Features

  • Note type selector: progress note, discharge summary, consultation, history and physical, and other standard clinical note types
  • Rich text content area: formatted text entry for clinical narrative
  • Document status management: tracks notes through the preliminary → final → amended lifecycle
  • Category tagging: apply clinical categories to notes for filtering and retrieval
Notes are stored as FHIR DocumentReference resources. The note type and category map to standard LOINC codes, making notes queryable and interoperable across systems connected to ClinikAPI.