This project provides an API to render HTML, CSS, JavaScript, and React components as images using Next.js and Playwright. It allows users to pass a component (HTML and CSS, or a React component), JavaScript, CSS/SCSS, and a list of dependencies, and the API will return an image URL after rendering the component.
- Render HTML, CSS, and JavaScript components as images
- Support for React components with CSS or SCSS
- Optional dependency handling for React components
- Customizable viewport size and image format
- Clone the repository
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Test the API by sending a POST request to
http://localhost:3000/api/render
with the appropriate payload
Request payload:
{
"component": "string",
"css": "string",
"javascript": "string (optional)",
"viewportWidth": "number (optional, default: 640)",
"viewportHeight": "number (optional, default: 640)",
"imageFormat": "string ('jpeg' or 'png', optional, default: 'png')",
"dependencies": "object (optional)"
}
{
"imageUrl": "string"
}