# App development

- [Basics](/app-development/basics.md)
- [Create app from any py-script](/app-development/basics/from-script-to-supervisely-app.md)
- [Configuration file](/app-development/basics/app-json-config.md): Configuration that connects Python application with Supervisely
- [config.json](/app-development/basics/app-json-config/config-json.md): Configuration file properties
- [Example 1. Headless](/app-development/basics/app-json-config/example-1.-headless.md): config.json for headless app explained
- [Example 2. App with GUI](/app-development/basics/app-json-config/example-2.-app-with-gui.md): config.json for app with GUI explained
- [v1 - Legacy](/app-development/basics/app-json-config/v1-legacy.md): legacy app examples
- [Example 1. v1 Modal Window](/app-development/basics/app-json-config/v1-legacy/example-1.-v1-modal-window.md): config.json for v1 app with Modal Window explained
- [Example 2. v1 app with GUI](/app-development/basics/app-json-config/v1-legacy/example-2.-v1-app-with-gui.md): config.json for v1 app with GUI explained
- [Add private app](/app-development/basics/add-private-app.md)
- [Add public app](/app-development/basics/add-public-app.md)
- [App Compatibility](/app-development/basics/compatibility.md)
- [Apps with GUI](/app-development/apps-with-gui.md): Supervisely GUI apps tutorial
- [Hello World!](/app-development/apps-with-gui/hello-world.md): Create simple supervisely app with GUI
- [App in the Image Labeling Tool](/app-development/apps-with-gui/labeling-tool-app.md)
- [App in the Video Labeling Tool](/app-development/apps-with-gui/video-labeling-tool-app.md)
- [In-browser app in the Labeling Tool](/app-development/apps-with-gui/labeling-tool-web-app.md)
- [Custom import app](/app-development/create-import-app.md)
- [Overview](/app-development/create-import-app/overview.md)
- [From template - simple](/app-development/create-import-app/create-import-app-from-template.md): A step-by-step tutorial of how to create custom import app using import template from SDK class \`sly.app.Import\`.
- [From scratch - simple](/app-development/create-import-app/create-import-app-without-template.md): A step-by-step tutorial of how to create custom import Supervisely app from scratch.
- [From scratch GUI - advanced](/app-development/create-import-app/create-import-app-without-template-gui.md): A step-by-step tutorial of how to create custom import Supervisely app from scratch with GUI.
- [Finding directories with specific markers](/app-development/create-import-app/finding-directories-with-specific-markers.md): A tutorial on how to find directories with specific markers (filename) and check them for some conditions using \`sly.fs.dirs\_with\_marker()\` function.
- [Custom export app](/app-development/create-export-app.md)
- [Overview](/app-development/create-export-app/overview.md)
- [From template - simple](/app-development/create-export-app/create-export-app-from-template.md): A step-by-step tutorial of how to create custom export app from SDK export template class \`sly.app.Export\`.
- [From scratch - advanced](/app-development/create-export-app/create-export-app-without-template.md): A step-by-step tutorial of how to create custom export app without using template from SDK (from scratch).
- [Neural Network integration](/app-development/neural-network-integration.md)
- [Overview](/app-development/neural-network-integration/overview.md)
- [Serving App](/app-development/neural-network-integration/inference.md)
- [Introduction](/app-development/neural-network-integration/inference/overview-nn-integration.md)
- [Instance segmentation](/app-development/neural-network-integration/inference/instance-segmentation.md): Step-by-step tutorial of how to integrate custom instance segmentation neural network into Supervisely platform on the example of detectron2.
- [Object detection](/app-development/neural-network-integration/inference/object-detection.md): Step-by-step tutorial of how to integrate custom object detection neural network into Supervisely platform on the example of detectron2.
- [Semantic segmentation](/app-development/neural-network-integration/inference/semantic-segmentation.md): Step-by-step tutorial of how to integrate custom semantic segmentation neural network into Supervisely platform on the example of mmsegmentation.
- [Pose estimation](/app-development/neural-network-integration/inference/pose-estimation.md): Step-by-step tutorial of how to integrate custom pose estimation neural network into Supervisely platform on the example of ViTPose.
- [Point tracking](/app-development/neural-network-integration/inference/point-tracking.md): Step-by-step tutorial on how to integrate custom point tracking neural network into Supervisely platform on the example of PIPs.
- [Object tracking](/app-development/neural-network-integration/inference/object-tracking.md): Step-by-step tutorial on how to integrate custom visual object tracking neural network into Supervisely platform on the example of MixFormer model.
- [Mask tracking](/app-development/neural-network-integration/inference/mask-tracking.md): Step-by-step tutorial on how to integrate custom video object segmentation neural network into Supervisely platform on the example of XMem.
- [Image matting](/app-development/neural-network-integration/inference/image-matting.md): Step-by-step tutorial on how to integrate custom interactive image matting neural network into Supervisely platform on the example of Matte Anything.
- [How to customize model inference](/app-development/neural-network-integration/inference/customize-inference.md)
- [Example: Custom model inference with probability maps](/app-development/neural-network-integration/inference/custom-inference-with-alpha-mask-segmentation.md)
- [Serving App with GUI](/app-development/neural-network-integration/inference-with-gui.md)
- [Introduction](/app-development/neural-network-integration/inference-with-gui/overview.md)
- [How to use default GUI template](/app-development/neural-network-integration/inference-with-gui/use-gui-template.md)
- [Default GUI template customization](/app-development/neural-network-integration/inference-with-gui/customize-gui-template.md)
- [How to create custom user interface](/app-development/neural-network-integration/inference-with-gui/create-custom-gui.md)
- [Inference API](/app-development/neural-network-integration/inference-api-tutorial.md)
- [Training App](/app-development/neural-network-integration/training.md)
- [Overview](/app-development/neural-network-integration/training/overview.md)
- [Tensorboard template](/app-development/neural-network-integration/training/tensorboard-template.md): Step-by-step tutorial explains how to use custom training script and log results in Tensorboard
- [Object detection](/app-development/neural-network-integration/training/training-dashboard.md): Step-by-step tutorial explains how to integrate custom object detection neural network into Supervisely platform
- [High level scheme](/app-development/neural-network-integration/nn-training-deployment.md): Guide explains how to train and deploy Neural Networks in Supervisely
- [Custom inference pipeline](/app-development/neural-network-integration/custom-inference-pipeline.md)
- [Train and predict automation model pipeline](/app-development/neural-network-integration/model-automation-train-and-predict-pipeline.md)
- [Advanced](/app-development/advanced.md)
- [Advanced debugging](/app-development/advanced/advanced-debugging.md): This guide explains how to debug your application
- [How to make your own widget](/app-development/advanced/how-to-make-your-own-widget.md): Guide explains how to create and add your own widget to Supervisely SDK
- [Tutorial - App Engine v1](/app-development/advanced/in-depth-app-development.md)
- [Chapter 1 Headless](/app-development/advanced/in-depth-app-development/chapter-1-headless.md)
- [Part 1 — Hello world! \[From your Python script to Supervisely APP\]](/app-development/advanced/in-depth-app-development/chapter-1-headless/part-1-hello-world-from-your-python-script-to-supervisely-app.md): In this part, we will show you how you can turn any Python code into a Supervisely application
- [Part 2 — Errors handling \[Catching all bugs\]](/app-development/advanced/in-depth-app-development/chapter-1-headless/part-2-errors-handling-catching-all-bugs.md): In this part, we will work with bugs. We will catch them.
- [Part 3 — Site Packages \[Customize your app\]](/app-development/advanced/in-depth-app-development/chapter-1-headless/part-3-site-packages-customize-your-app.md): In Supervisely applications, we have provided the ability to add site-packages.
- [Part 4 — SDK Preview \[Lemons counter app\]](/app-development/advanced/in-depth-app-development/chapter-1-headless/part-4-sdk-preview-lemons-counter-app.md): In this part, we will load a project from the Ecosystem and count the number of annotated lemons.
- [Part 5 — Integrate custom tracker into Videos Annotator tool \[OpenCV Tracker\]](/app-development/advanced/in-depth-app-development/chapter-1-headless/part-5-integrate-custom-tracker-into-videos-annotator-tool-opencv-tracker.md): In this part, we will learn how to integrate any tracker into Videos Annotator.
- [Chapter 2 Modal Window](/app-development/advanced/in-depth-app-development/chapter-2-modal-window.md)
- [Part 1 — Modal window \[What is it?\]](/app-development/advanced/in-depth-app-development/chapter-2-modal-window/part-1-modal-window-what-is-it.md): In this part, we will create a basic application with modal window. We will use the modal window as an information board.
- [Part 2 — States and Widgets \[Customize modal window\]](/app-development/advanced/in-depth-app-development/chapter-2-modal-window/part-2-states-and-widgets-customize-modal-window.md): In this section, we will customize the modal window. We will use a modal window to enter arguments.
- [Chapter 3 UI](/app-development/advanced/in-depth-app-development/chapter-3-ui.md)
- [Part 1 — While True Script \[It's all what you need\]](/app-development/advanced/in-depth-app-development/chapter-3-ui/part-1-while-true-script-its-all-what-you-need.md): In this part we will understand what a While True Script is. And why you need it.
- [Part 2 — UI Rendering \[Simplest UI Application\]](/app-development/advanced/in-depth-app-development/chapter-3-ui/part-2-ui-rendering-simplest-ui-application.md): In this part, you will learn to create a basic UI application.
- [Part 3 — APP Handlers \[Handle Events and Errors\]](/app-development/advanced/in-depth-app-development/chapter-3-ui/part-3-app-handlers-handle-events-and-errors.md): In this part, we will introduce you to app handlers and tell you what they are for.
- [Part 4 — State and Data \[Mutable Fields\]](/app-development/advanced/in-depth-app-development/chapter-3-ui/part-4-state-and-data-mutable-fields.md): In this part, you will learn how to change the values of state and data fields. And how they can be used in the application.
- [Part 5 — Styling your app \[Customizing the UI\]](/app-development/advanced/in-depth-app-development/chapter-3-ui/part-5-styling-your-app-customizing-the-ui.md): In this part, you will learn how you can customize HTML in your application. We will use our Application Designer to preview the HTML files.
- [Chapter 4 Additionals](/app-development/advanced/in-depth-app-development/chapter-4-additionals.md)
- [Part 1 — Remote Developing with PyCharm \[Docker SSH Server\]](/app-development/advanced/in-depth-app-development/chapter-4-additionals/part-1-remote-developing-with-pycharm-docker-ssh-server.md): In this part, you will learn how to start developing using PyCharm and Docker.
- [Custom Configuration](/app-development/advanced/custom-configuration.md)
- [Fixing SSL Certificate Errors in Supervisely](/app-development/advanced/custom-configuration/fixing-ssl-certificate-errors-in-supervisely.md): In this tutorial you will learn how to fix errors with SSL certificate
- [Fixing 400 HTTP errors when using HTTP instead of HTTPS](/app-development/advanced/custom-configuration/fixing-https-redirect-error.md): In this tutorial you will learn how to fix 400 HTTP errors which usually occur when HTTPS is enabled and the client is using HTTP instead, which causes the client to skip the request body entirely for
- [Autostart](/app-development/advanced/autostart.md): Autostart for your app with GUI and more
- [Coordinate System](/app-development/advanced/coordinate-system.md)
- [MLOps Workflow integration](/app-development/advanced/mlops-workflow-integration.md): This doc explains how to integrate MLOps Workflow in your application
- [Versioning](/app-development/advanced/mlops-versioning.md): Detailed guide on data versioning in MLOps: what is saved and how it works
- [Multi-User Session Management](/app-development/advanced/multi_user_session.md): Learn how to implement multi-user session management in your Supervisely apps, ensuring isolated user interactions with widgets.
- [Widgets](/app-development/widgets.md): This documentation page provides a comprehensive overview of the various types of widgets available for use in your Supervisely applications
- [Input](/app-development/widgets/input.md): Input widgets are an essential component of many applications, as they provide users with a means to enter and modify data in a straightforward and intuitive manner.
- [Input](/app-development/widgets/input/input.md)
- [InputNumber](/app-development/widgets/input/inputnumber.md)
- [InputTag](/app-development/widgets/input/inputtag.md)
- [InputTagList](/app-development/widgets/input/inputtaglist.md)
- [BindedInputNumber](/app-development/widgets/input/bindedinputnumber.md)
- [DatePicker](/app-development/widgets/input/datepicker.md)
- [DateTimePicker](/app-development/widgets/input/datetimepicker.md)
- [ColorPicker](/app-development/widgets/input/colorpicker.md)
- [TimePicker](/app-development/widgets/input/timepicker.md)
- [ClassesMapping](/app-development/widgets/input/classesmapping.md)
- [ClassesColorMapping](/app-development/widgets/input/classescolormapping.md)
- [DeployModel](/app-development/widgets/input/deploymodel.md)
- [Controls](/app-development/widgets/controls.md): Allow users to interact with and control various aspects of an application.
- [Button](/app-development/widgets/controls/button.md)
- [Checkbox](/app-development/widgets/controls/checkbox.md)
- [CheckboxField](/app-development/widgets/controls/checkboxfield.md)
- [RadioGroup](/app-development/widgets/controls/radiogroup.md)
- [Switch](/app-development/widgets/controls/switch.md)
- [Slider](/app-development/widgets/controls/slider.md)
- [TrainValSplits](/app-development/widgets/controls/trainvalsplits.md)
- [FileStorageUpload](/app-development/widgets/controls/filestorageupload.md)
- [Timeline](/app-development/widgets/controls/timeline.md)
- [Pagination](/app-development/widgets/controls/pagination.md)
- [Text Elements](/app-development/widgets/text-elements.md): Allow users to display and input textual data in various forms.
- [Text](/app-development/widgets/text-elements/text.md)
- [TextArea](/app-development/widgets/text-elements/textarea.md)
- [Editor](/app-development/widgets/text-elements/editor.md)
- [Copy to Clipboard](/app-development/widgets/text-elements/copytoclipboard.md)
- [Markdown](/app-development/widgets/text-elements/markdown.md)
- [Tooltip](/app-development/widgets/text-elements/tooltip.md)
- [ElementTag](/app-development/widgets/text-elements/elementtag.md)
- [ElementTagsList](/app-development/widgets/text-elements/elementtagslist.md)
- [Docstrings](/app-development/widgets/text-elements/docstrings.md)
- [Media](/app-development/widgets/media.md): Widgets for displaying media content, such as images, videos
- [Image](/app-development/widgets/media/image.md)
- [LabeledImage](/app-development/widgets/media/labeledimage.md)
- [GridGallery](/app-development/widgets/media/gridgallery.md)
- [Video](/app-development/widgets/media/video.md)
- [VideoPlayer](/app-development/widgets/media/videoplayer.md)
- [ImagePairSequence](/app-development/widgets/media/imagepairsequence.md)
- [Icons](/app-development/widgets/media/icons.md)
- [ObjectClassView](/app-development/widgets/media/objectclassview.md)
- [ObjectClassesList](/app-development/widgets/media/objectclasseslist.md)
- [ImageSlider](/app-development/widgets/media/imageslider.md)
- [Carousel](/app-development/widgets/media/carousel.md)
- [TagMetaView](/app-development/widgets/media/tagmetaview.md)
- [TagMetasList](/app-development/widgets/media/tagmetaslist.md)
- [ImageAnnotationPreview](/app-development/widgets/media/imageannotationpreview.md)
- [ClassesMappingPreview](/app-development/widgets/media/classesmappingpreview.md)
- [ClassesListPreview](/app-development/widgets/media/classeslistpreview.md)
- [TagsListPreview](/app-development/widgets/media/tagslistpreview.md)
- [MembersListPreview](/app-development/widgets/media/memberslistpreview.md)
- [Heatmap](/app-development/widgets/media/heatmap.md)
- [Selection](/app-development/widgets/selection.md): Widgets that facilitate the selection of options from a set, which could include list boxes or radio buttons
- [Select](/app-development/widgets/selection/select.md)
- [SelectTeam](/app-development/widgets/selection/selectteam.md)
- [SelectClass](/app-development/widgets/selection/selectclass.md)
- [SelectTag](/app-development/widgets/selection/selecttag.md)
- [SelectUser](/app-development/widgets/selection/selectuser.md)
- [SelectWorkspace](/app-development/widgets/selection/selectworkspace.md)
- [SelectProject](/app-development/widgets/selection/selectproject.md)
- [SelectDataset](/app-development/widgets/selection/selectdataset.md)
- [SelectDatasetTree](/app-development/widgets/selection/selectdatasettree.md)
- [SelectItem](/app-development/widgets/selection/selectitem.md)
- [SelectTagMeta](/app-development/widgets/selection/selecttagmeta.md)
- [SelectAppSession](/app-development/widgets/selection/selectappsession.md)
- [SelectString](/app-development/widgets/selection/selectstring.md)
- [Transfer](/app-development/widgets/selection/transfer.md)
- [DestinationProject](/app-development/widgets/selection/destinationproject.md)
- [TeamFilesSelector](/app-development/widgets/selection/teamfilesselector.md)
- [FileViewer](/app-development/widgets/selection/fileviewer.md)
- [Dropdown](/app-development/widgets/selection/dropdown.md)
- [Cascader](/app-development/widgets/selection/cascader.md)
- [ClassesListSelector](/app-development/widgets/selection/classeslistselector.md)
- [TagsListSelector](/app-development/widgets/selection/tagslistselector.md)
- [MembersListSelector](/app-development/widgets/selection/memberslistselector.md)
- [TreeSelect](/app-development/widgets/selection/treeselect.md)
- [SelectCudaDevice](/app-development/widgets/selection/selectcudadevice.md)
- [CustomModelsSelector](/app-development/widgets/selection/custommodelsselector.md)
- [Thumbnails](/app-development/widgets/thumbnails.md): Thumbnails are used to show input or output data representations
- [ProjectThumbnail](/app-development/widgets/thumbnails/projectthumbnail.md)
- [DatasetThumbnail](/app-development/widgets/thumbnails/datasetthumbnail.md)
- [VideoThumbnail](/app-development/widgets/thumbnails/videothumbnail.md)
- [FolderThumbnail](/app-development/widgets/thumbnails/folderthumbnail.md)
- [FileThumbnail](/app-development/widgets/thumbnails/filethumbnail.md)
- [Status Elements](/app-development/widgets/status-elements.md): Widgets that indicate status, like progress bars, loading indicators, or status lights
- [Progress](/app-development/widgets/status-elements/progressbar.md)
- [NotificationBox](/app-development/widgets/status-elements/notificationbox.md)
- [DoneLabel](/app-development/widgets/status-elements/donelabel.md)
- [DialogMessage](/app-development/widgets/status-elements/dialogmessage.md)
- [TaskLogs](/app-development/widgets/status-elements/tasklogs.md)
- [Badge](/app-development/widgets/status-elements/badge.md)
- [ModelInfo](/app-development/widgets/status-elements/modelinfo.md)
- [Rate](/app-development/widgets/status-elements/rate.md)
- [CircleProgress](/app-development/widgets/status-elements/circleprogress.md)
- [ActivityFeed](/app-development/widgets/status-elements/activityfeed.md)
- [Layouts and Containers](/app-development/widgets/layouts-and-containers.md): Widgets that help organize content on the screen, like grids, tabs, or sections
- [Card](/app-development/widgets/layouts-and-containers/card.md)
- [Container](/app-development/widgets/layouts-and-containers/container.md)
- [Empty](/app-development/widgets/layouts-and-containers/empty.md)
- [Field](/app-development/widgets/layouts-and-containers/field.md)
- [Flexbox](/app-development/widgets/layouts-and-containers/flexbox.md)
- [Grid](/app-development/widgets/layouts-and-containers/grid.md)
- [Menu](/app-development/widgets/layouts-and-containers/menu.md)
- [OneOf](/app-development/widgets/layouts-and-containers/oneof.md)
- [Sidebar](/app-development/widgets/layouts-and-containers/sidebar.md)
- [Stepper](/app-development/widgets/layouts-and-containers/stepper.md)
- [RadioTabs](/app-development/widgets/layouts-and-containers/radiotabs.md)
- [Tabs](/app-development/widgets/layouts-and-containers/tabs.md)
- [TabsDynamic](/app-development/widgets/layouts-and-containers/tabsdynamic.md)
- [ReloadableArea](/app-development/widgets/layouts-and-containers/reloadablearea.md)
- [Collapse](/app-development/widgets/layouts-and-containers/collapse.md)
- [Dialog](/app-development/widgets/layouts-and-containers/dialog.md)
- [IFrame](/app-development/widgets/layouts-and-containers/iframe.md)
- [Modal](/app-development/widgets/layouts-and-containers/modal.md)
- [Tables](/app-development/widgets/tables.md): Widgets designed to display data in a structured, tabular format
- [Table](/app-development/widgets/tables/table.md)
- [ClassicTable](/app-development/widgets/tables/classictable.md)
- [RadioTable](/app-development/widgets/tables/radiotable.md)
- [ReorderTable](/app-development/widgets/tables/reordertable.md)
- [ClassesTable](/app-development/widgets/tables/classestable.md)
- [RandomSplitsTable](/app-development/widgets/tables/randomsplitstable.md)
- [FastTable](/app-development/widgets/tables/fasttable.md)
- [TagsTable](/app-development/widgets/tables/tagstable.md)
- [Charts and Plots](/app-development/widgets/charts-and-plots.md): Widgets for graphically representing data, such as bar charts, line graphs, or scatter plots
- [LineChart](/app-development/widgets/charts-and-plots/linechart.md)
- [GridChart](/app-development/widgets/charts-and-plots/gridchart.md)
- [HeatmapChart](/app-development/widgets/charts-and-plots/heatmapchart.md)
- [ApexChart](/app-development/widgets/charts-and-plots/apexchart.md)
- [ConfusionMatrix](/app-development/widgets/charts-and-plots/confusionmatrix.md)
- [LinePlot](/app-development/widgets/charts-and-plots/lineplot.md)
- [GridPlot](/app-development/widgets/charts-and-plots/gridplot.md)
- [ScatterChart](/app-development/widgets/charts-and-plots/scatterchart.md)
- [TreemapChart](/app-development/widgets/charts-and-plots/treemapchart.md)
- [PieChart](/app-development/widgets/charts-and-plots/piechart.md)
- [Compare Data](/app-development/widgets/compare-data.md): Compare datasets, elements, or object classes, highlighting similarities or differences
- [MatchDatasets](/app-development/widgets/compare-data/matchdatasets.md)
- [MatchTagMetas](/app-development/widgets/compare-data/matchtagmetas.md)
- [MatchObjClasses](/app-development/widgets/compare-data/matchobjclasses.md)
- [ClassBalance](/app-development/widgets/compare-data/classbalance.md)
- [CompareAnnotations](/app-development/widgets/compare-data/compareannotations.md)