diff --git a/README.md b/README.md
index 5a35e2c..34407f0 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,7 @@
+
**Table of Contents**
- [What is Youch?](#what-is-youch)
@@ -37,7 +38,7 @@
Youch is an error-parsing library that pretty prints JavaScript errors on a web page or the terminal.
-As you can see in the following screenshots, Youch deconstructs the error and properly displays the **error message**, **name**, **stack trace** with source code, and a lot more information about the error.
+As you can see in the following screenshots, the error presented by Youch is a lot more readable and presentable in comparison to the unformatted stack trace.
@@ -152,6 +153,12 @@ Let's deconstruct the error page and understand what each section of the output
### Error info
+The top-most section displays the Error info, which includes:
+
+- The Error class constructor name.
+- The Error title. It is set using the `options.title` property.
+- And the Error message (highlighted in red).
+
View HTML output
@@ -159,14 +166,10 @@ Let's deconstruct the error page and understand what each section of the output
-The top-most section displays the Error info, which includes:
-
-- The Error class constructor name.
-- The Error title. It is set using the `options.title` property.
-- And the Error message (highlighted in red).
-
### Stack trace
+The Stack trace section displays individual frames as accordion sections. Clicking on the section title reveals the frame source code. The source code is unavailable for native stack frames that are part of the Node.js, Deno, and Bun internals.
+
View HTML output
@@ -174,6 +177,8 @@ The top-most section displays the Error info, which includes:
+For the ANSI output, only the first frame from the application code is expanded to show the source code.
+
View ANSI output
@@ -181,10 +186,12 @@ The top-most section displays the Error info, which includes:
-The Stack trace section displays individual frames as accordion sections. Clicking on the section title reveals the frame source code. The source code is unavailable for native stack frames that are part of the Node.js, Deno, and Bun internals.
-
### Raw output
+Clicking the `Raw` button displays the Error object in its raw form, with all the error properties (not just the stack trace).
+
+The raw output may be helpful for errors that contain additional properties. HTTP client libraries like Axios, Got, Undici, and others usually contain the HTTP response details within the error object.
+
View HTML output
@@ -192,6 +199,8 @@ The Stack trace section displays individual frames as accordion sections. Clicki
+In case of ANSI output, you can view the raw output using the `YOUCH_RAW` environment variable. For example: `YOUCH_RAW=true node your-script.js`.
+
View ANSI output
@@ -199,12 +208,10 @@ The Stack trace section displays individual frames as accordion sections. Clicki
-Clicking the `Raw` button displays the Error object in its raw form, with all the error properties (not just the stack trace).
-
-The raw output may be helpful for errors that contain additional properties. HTTP client libraries like Axios, Got, Undici, and others usually contain the HTTP response details within the error object.
-
### Error cause
+[Error cause](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause) is a standard way to bubble errors while wrapping them within a generic error. Youch displays the error cause as an interactive property within its own section.
+
View HTML output
@@ -212,6 +219,8 @@ The raw output may be helpful for errors that contain additional properties. HTT
+For the ANSI output, the nested properties are shown upto the two levels deep. However, you can adjust the depth using the `YOUCH_CAUSE` environment variable. For example: `YOUCH_CAUSE=4 node your-script.js`.
+
View ANSI output
@@ -219,8 +228,6 @@ The raw output may be helpful for errors that contain additional properties. HTT
-[Error cause](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause) is a standard way to bubble errors while wrapping them within a generic error. Youch displays the error cause as an interactive property within its own section.
-
### Metadata (HTML only)
Metadata refers to any additional data that you want to display on the error page. It could be the HTTP request headers, the logged-in user info, or the list of available application routes.
@@ -297,14 +304,14 @@ In the following example, we use [Shiki](https://shiki.matsu.io/) to perform syn
```ts
import { codeToHtml } from 'shiki'
-import { BaseComponent } from 'youch'
import { ErrorStackSourceProps } from 'youch/types'
+import { ErrorStackSource } from 'youch/templates/error_stack_source'
/**
* A custom component that uses shiki to render the source
* code snippet for a stack frame
*/
-class CustomErrorStackSource extends BaseComponent {
+class CustomErrorStackSource extends ErrorStackSource {
/**
* Return the styles you want to inject from this
* component
diff --git a/package.json b/package.json
index b7fdaac..dda6fae 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
"exports": {
".": "./build/index.js",
"./types": "./build/src/types.js",
- "./templates/*": "./build/templates/*"
+ "./templates/*": "./build/templates/*/main.js"
},
"scripts": {
"pretest": "npm run lint",