ViewComfy is an open source tool to help you create beautiful web apps from ComfyUI workflows.

It can support multiple workflows in the same UI and works well with image, video, and text outputs.

Easily deploy your applications on serverless infrastructure using ViewComfy cloud, or on the service of your choice. Applications hosted on ViewComfy cloud come with a user management system, billing tracking and shareable email links out of the box. More info in the deployment section and in the docs.

Configure how each workflow input appears and expose only what your users need.

Supported input types:

• Text
• Numbers
• Dropdowns (Select)
• Sliders
• Check boxes
• Images
• Videos
• Audio

Inputs can be required or optional. It is also possible to add helper text to guide users.

Easily add masks to image inputs.

Create complex workflow behaviours in your apps, like workflow routing, optional images, and custom input validation with error message using the ViewComfy utils node pack. This video goes over some examples.

Built-in user output history for apps deployed on ViewComfy Cloud.

Built-in hub with all of your apps for apps deployed on ViewComfy Cloud.

Built-in user management and analytics for apps deployed on ViewComfy Cloud.

Run workflows on serverless infrastructure and connect them via API to your apps.

After installing ViewComfy, you will be able to connect it to your local installation of ComfyUI, or workflows deployed on ViewComfy cloud.

You can also skip the installation by using the web-hosted version of the ViewComfy app editor. When using the web-hosted version of the editor, you will need to first deploy the workflow on ViewComfy cloud and connect the app with the workflow's API endpoint.

Install Node.js v20.18 or later (recommended v20.18)

Clone the repo

git clone https://github.com/ViewComfy/ViewComfy.git

Install dependencies and start the dev server

cd ViewComfy
npm install
npm run dev

For a more detailed guide on how to set up playground mode and share your app with ngrok you can refer to our blog.

You can deploy ViewComfy apps on the service of your choice, but by far the easiest way to do it is by using ViewComfy Cloud.

The first thing you need to do to deploy your app is set up the Comfy server and get your API endpoint. This guide goes over how to do that.

Once set up, the workflow will be running on serverless infrastructure and be accessible via the standard Comfy interface and an API endpoint.

To link your endpoint to your workflow inside your ViewComfy app, you just need to copy it into the right field:

To use the endpoint with your local installation of ViewComfy, you will also need to get your API keys from the dashboard and add them to your .env file:

.env file ->
VIEWCOMFY_CLIENT_ID="<your client id>"
VIEWCOMFY_CLIENT_SECRET="<your client secret>"

Once you are done, the app will send a request to your ViewComfy deployment every time you click generate.

The easiest way to do this is to navigate to the ViewComfy Apps tab on the ViewComfy cloud dashboard and drop the viewcomfy.json there. For all the details, you can refer to this video.

But ultimately, you can deploy your app on the hosting service of your choice. For example, there are some details on how to host the app on Modal in the hosting-examples/modal folder.

You can drag and drop your ComfyUI workflow_api.json file into the form editor. It will then generate a new form that you can use to configure the inputs that will be displayed on the playground.

For more details on how to use the editor with advanced Comfy workflows, you can refer to the demo guide.

The Playground is a simplified UI where you can run your workflows. It can easily be turned into a shareable web app using a service like ngrok or ViewComfy Cloud.

Playground Mode will only load the playground page and can easily be turned into a web app. This is convenient if you want to share your workflow with someone without sharing the workflow_api.json, and without them having to install ComfyUI. It also allows you to only expose the inputs you want to expose to the end user.

This mode is enabled by default when running apps on ViewComfy Cloud. To use it on your local you need to follow the following steps.

To use Playground Mode on your local, you need to download the view_comfy.json that is generated when you use the form editor and place it in the root of the project along with the workflow_api.json.

To enable Playground Mode, edit the .env file in the root of the project and set NEXT_PUBLIC_VIEW_MODE to true:

.env file ->
NEXT_PUBLIC_VIEW_MODE="true"

npm run dev

ViewComfy by default will look for a file called view_comfy.json in the project's root folder to render the web app. You can use the VIEW_COMFY_FILE_NAME environment variable to point to a different file.

.env file ->
VIEW_COMFY_FILE_NAME="view_comfy.json"
NEXT_PUBLIC_VIEW_MODE="true"

npm run dev

e.g. with the command line:

VIEW_COMFY_FILE_NAME="view_comfy.json" NEXT_PUBLIC_VIEW_MODE="true" npm run dev

You can also drop a view_comfy.json directly in the form editor to edit it without needing the workflow_api.json.

ViewComfy supports user management through Clerk. You can enable it by setting the NEXT_PUBLIC_USER_MANAGEMENT="true". We recommend using this feature only when Playground mode is activated (NEXT_PUBLIC_VIEW_MODE="true").

.env file ->
NEXT_PUBLIC_USER_MANAGEMENT="true"
NEXT_PUBLIC_VIEW_MODE="true"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your-clerk-publishable-key"
CLERK_SECRET_KEY="your-clerk-secret-key"

Build docker image

docker build \
  --build-arg NEXT_PUBLIC_VIEW_MODE="true" \
  --build-arg NEXT_PUBLIC_USER_MANAGEMENT="true" \
  --build-arg NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your-clerk-publishable-key" \
  -t viewcomfy .

Run docker image

docker run -it --name viewcomfy-container -p 3000:3000 viewcomfy

ViewComfy is a Next.js app - Next.js Documentation

Feel free to contribute with feedback, suggestions, issues or pull requests.