Skip to main content
Building a ViewComfy app is a simple process and can be done via our online editor or locally with our open source solution. We have two video guides to help people get started:

​
Building the app

To get started, you need to use the workflow_api.json file from the workflow you want to turn into an app. There are more details on how to get that file here. Once you have the file ready, you just need to drop it in the editor. ViewComfy app editor After clicking “Save changes”, you can add more workflows to the same app by using the “Add Workflow” button.

​
Editing the app

ViewComfy app editor The “App Title” and “App Image URL” allow you to brand your app. Note that you need to provide a URL for the image, meaning it needs to be hosted somewhere. The “Title” will be the name of your workflow. If you have multiple ones, they will appear in a dropdown at the top. The “ViewComfy Endpoint” is the API link to your deployment. The deployment is where the workflow you used to make the app will run (ei. generate content). With the latest update of our cloud, you can simply select the name of the deployment you want to use to run your workflow using the dropdown. Alternatively, you can get the endpoint from your workflow dashboard. ViewComfy API By default, the editor will load all the parameters in the workflow. You can remove parameters by clicking the bin icon next to each of them. You can also add preview images to show your users the kind of output the app will generate. Again, you will need a URL to add the images.

​
Editing inputs

In the app editor, you can delete the parameters you don’t want to expose, update default values and control the way your inputs will be displayed. To update the default value of an input you don’t want to expose in the UI, you need to hide it instead of deleting it. Deleting it will revert to the value that was saved in the workflow_api file you used to create the app. Using the input menu, you can change the following input properties:
  • input name (label)
  • input type
  • validation values
  • default values (in cases where you want to expose the input to the user)
  • add help text, tooltip and custom error messages
ViewComfy App Editor input menu

​
Using the mask editor

To allow your users to apply a mask on the images they use as input, you need to select the “Image with Mask Editor” input type. This input type behaves the same way as the load image node in ComfyUI. ViewComfy App Mask Editor

​
managing outputs

Supported output types are rendered by their mime-type
  • Image (image/)
  • Video (video/)
  • Audio (audio/)
  • Text (.txt)
  • PSD Files (image/vnd.adobe.photoshop)

​
Compare images side by side

You can compare any two images using the compare output feature ViewComfy compare output ViewComfy compare images output

​
Display text

To display text, you need to save the text in your workflow using the “save text” node from our utils node pack and enable text output in the app editor. Enable text output in your apps

​
Display the name of the output file

You can enable this option to display the file name in the output section of the playground ViewComfy show filename output ViewComfy show filename full output If you surround the file name with __, for example: __text__, the text between ’ __’ will be shown instead.
  • In the case of the SaveImage Node, it will automatically add an _ to the file name, that’s why you should only add 1 after the name, like in the picture
ViewComfy show filename filename prefix output ViewComfy show filename parsed output

​
Example creating a PSD file Output

To create a .psd file that ViewComfy can display in the playground page, you need to connect it to a “Show Any” node and make sure that the output has the following shape. 
{
    "type": "output",
    "filename": "psd_file_name.psd"
}
You can find an example workflow_api.json here that uses this feature with the string core nodes. PSD workflow

​
Editing the app (Advanced)

It is also possible to make more advanced edits to the apps by making changes directly in the view_comfy.json file. If you use Cursor, you can use our Cursor Rule to help you. (We have some examples on how to do that here).

​
Supported input types

  • text
  • long-text
  • number
  • boolean
  • video
  • image
  • audio
  • seed => seed, noise_seed, rand_seed
  • number slider => with min, max and step.
  • select => list of options (label and value) e.g:
{
    "label": "Depth",
    "value": "Depth"
}

​
view_comfy.json file structure

You can download the view_comfy.json file from the editor (“Download as ViewComfy JSON”). The section of the json file called “viewComfyJSON” is what defines the UI elements inside the app. More specifically, the “input” and “advancedInputs” sections are the ones that define the parameters. 
"viewComfyJSON": {
    "title": "Controlnet",
    "description": "",
    "viewcomfyEndpoint": "https://viewcomfy--108-3-td5l2v-comfyui-infer.modal.run",
    "previewImages": [
        null,
        null,
        null
    ],
    "inputs": [
    {
    "title": "Load Image",
    "inputs": [
        {
        "title": "Load Image",
        "placeholder": "Load Image",
        "value": null,
        "workflowPath": [
            "17",
            "inputs",
            "image"
        ],
        "helpText": "Helper Text",
        "valueType": "image",
        "validations": {
            "required": true
        },
        "key": "17-inputs-image"
        }
    ],
    "key": "17-LoadImage"
    },
    {
    "title": "CLIP Text Encode (Positive Prompt)",
    "inputs": [
        {
        "title": "CLIP Text Encode (Positive Prompt)",
        "placeholder": "CLIP Text Encode (Positive Prompt)",
        "value": "A picture of the ViewComfy jersey",
        "workflowPath": [
            "23",
            "inputs",
            "text"
        ],
        "helpText": "Helper Text",
        "valueType": "long-text",
        "validations": {
            "required": true
        },
        "key": "23-inputs-text"
        }
    ],
    "key": "23-CLIPTextEncode"
    }
    ],
    "advancedInputs": [
        {
        "title": "String",
        "inputs": [
            {
            "title": "Value",
            "placeholder": "Value",
            "value": "Depth",
            "workflowPath": [
                "37",
                "inputs",
                "value"
            ],
            "helpText": "Helper Text",
            "valueType": "string",
            "validations": {
                "required": true
            },
            "key": "37-inputs-value"
            }
        ],
        "key": "37-String"
        }
    ],
    "id": "452c9cee8f9128"
}
The key things to know are:
  • The input name in the UI is the input “title”
  • Default values are stored in “value”
  • The UI will render the inputs in the same order as in the json
  • You can create dropdowns by changing the input type to select and adding a list of labels.

​
Rename parameters

So, for example, you can rename the “CLIP Text Encode (Positive Prompt)” input to “prompt” and remove the default value by changing that input to: 
{
    "title": "Prompt",
    "placeholder": "Write a prompt",
    "value": "",
    "workflowPath": [
        "23",
        "inputs",
        "text"
    ],
    "helpText": "Helper Text",
    "valueType": "long-text",
    "validations": {
        "required": true
    },
    "key": "23-inputs-text"
}

​
Create dropdowns

ViewComfy dropdown input You can create a dropdown for the “String” input where users will be able to select between two types of controlnets by changing the value type for that input to “select”, and adding a list of options (the label is what will show in the UI and the value is what will be sent to the node.)
Dropdown
{
    "title": "String",
    "inputs": [
        {
        "title": "Value",
        "placeholder": "Value",
        "value": "Depth",
        "workflowPath": [
            "37",
            "inputs",
            "value"
        ],
        "helpText": "Helper Text",
        "valueType": "select",
        "options": [
            {
            "label": "Depth",
            "value": "Depth"
            },
            {
            "label": "Canny",
            "value": "Canny"
            }
        ],
        "validations": {
            "required": true
        },
        "key": "37-inputs-value"
        }
    ],
    "key": "37-String"
}

​
Organise parameters

And finally, you can rename that input to “Controlnet type” and bring it to the top (and outside of the advanced input section), so that the viewComfyJSON section of the json ends up looking like this: 
"viewComfyJSON": {
    "title": "Controlnet",
    "description": "",
    "viewcomfyEndpoint": "https://viewcomfy--1594-1369-mb0g8a-comfyui-infer.modal.run",
    "previewImages": [
        null,
        null,
        null
    ],
    "inputs": [
        {
        "title": "Controlnet type",
        "inputs": [
            {
            "title": "Controlnet type",
            "placeholder": "Controlnet type",
            "value": "Depth",
            "workflowPath": [
                "37",
                "inputs",
                "value"
            ],
            "helpText": "Helper Text",
            "valueType": "select",
            "options": [
                {
                "label": "Depth",
                "value": "Depth"
                },
                {
                "label": "Canny",
                "value": "Canny"
                }
            ],
            "validations": {
                "required": true
            },
            "key": "37-inputs-value"
            }
        ],
        "key": "37-String"
        },
        {
        "title": "Prompt",
        "inputs": [
            {
            "title": "Prompt",
            "placeholder": "Write a prompt",
            "value": "",
            "workflowPath": [
                "23",
                "inputs",
                "text"
            ],
            "helpText": "Helper Text",
            "valueType": "long-text",
            "validations": {
                "required": true
            },
            "key": "23-inputs-text"
            }
        ],
        "key": "23-CLIPTextEncode"
        },
        {
        "title": "Image",
        "inputs": [
            {
            "title": "Image",
            "placeholder": "Image",
            "value": null,
            "workflowPath": [
                "17",
                "inputs",
                "image"
            ],
            "helpText": "Helper Text",
            "valueType": "image",
            "validations": {
                "required": true
            },
            "key": "17-inputs-image"
            }
        ],
        "key": "17-LoadImage"
        }
    ],
    "advancedInputs": [
    ],
    "id": "452c9cee8f9128"
}

​
Create sliders

ViewComfy slider input You can create a slider by adding a slider object to a parameter with min, max and step. 
{
            "title": "KSampler",
            "inputs": [
              {
                "title": "Cfg",
                "placeholder": "Cfg",
                "value": 8,
                "workflowPath": [
                  "3",
                  "inputs",
                  "cfg"
                ],
                "helpText": "Helper Text",
                "valueType": "slider",
                "slider": {
                  "min": 1,
                  "max": 10,
                  "step": 1
                },
                "validations": {
                  "required": true
                },
                "key": "3-inputs-cfg"
              }
            ]
}

​
Input Tooltips

You can add tooltips beside your input to add helpful information to the user ViewComfy tooltip input You can add a tooltip by adding a tooltip key to a parameter and if you want to add a new line you can add the \n 

    {
        "title": "Seed",
        "placeholder": "Seed",
        "value": 40741760227630,
        "workflowPath": [
            "3",
            "inputs",
            "seed"
        ],
        "tooltip": "This is a tooltip\n new line",
        "helpText": "Helper Text",
        "valueType": "seed",
        "validations": {
            "required": true
        },
        "key": "3-inputs-seed"
    },

​
Input Help text

You can add a help text below your input to add guidance information to the user ViewComfy helptext input You can add or modify helpText key of a parameter and if you want to add a new line you can add the \n 

    {
        "title": "Seed",
        "placeholder": "Seed",
        "value": 40741760227630,
        "workflowPath": [
            "3",
            "inputs",
            "seed"
        ],
        "helpText": "Helper Text\n new line",
        "valueType": "seed",
        "validations": {
            "required": true
        },
        "key": "3-inputs-seed"
    },