App Elements
A practical guide to the main frontend surfaces you use when managing and editing bots in NxCreator.
This page covers the frontend parts of NxCreator that users actually click: the bot dashboard, the code editor, sections, and routine actions like opening, editing, or removing a bot.
Dashboard basics
The dashboard is the starting point for most work. From there, you add a bot, open an existing bot, move into the editor, or switch to other product surfaces such as docs, billing, and the store.
Think of the dashboard as the control layer and the editor as the work layer. The dashboard helps you choose what to work on. The editor is where you actually change bot logic.
| Element | What it is for |
|---|---|
Add Bot | Connect a new Telegram bot to NxCreator using its token. |
| Bot card or bot row | Open an existing bot and continue editing it. |
| Docs area | Read product, runtime, and workflow documentation without leaving the app. |
| Billing and account pages | Manage plan limits, upgrades, and account-level settings. |
Editor surfaces
NxCreator has more than one editing surface. The main code editor is for full bot files. The section editor is for focused edits to one section at a time. There is also an HTML editor for web project content where applicable.
| Surface | Best used for |
|---|---|
Code Editor | Editing the full bot code with snippets, AI help, and tools nearby. |
Section Editor | Making smaller targeted edits when you want to focus on one section only. |
Env Editor | Updating environment variables or configuration values tied to a bot. |
HTML Editor | Editing web project markup in the frontend project flow. |
The main editor also includes support panels such as snippets and the AI chat. These are productivity features, not separate runtimes. They help you write and revise code faster from the same screen.
Sections
Sections are frontend organization units for your bot code. They break one large bot file into named chunks so the UI can present the code in a way that is easier to navigate and edit.
A section is not a separate deployed file. It is a labeled range inside the full bot source. That distinction matters: sections help the editing experience, but the bot still behaves like one overall project.
- Use sections to navigate faster: They reduce scrolling and make large bots easier to reason about.
- Use the section editor for focused changes: It is useful when you want less UI noise than the full editor.
- Regenerate sections when structure changes heavily: Large rewrites can make old section boundaries less helpful.
Bot actions
Common bot actions in the frontend include opening a bot, editing its code, changing its visible metadata, or deleting it when it is no longer needed. These are product actions first and technical actions second, so the UI should stay understandable even for users who are not thinking in backend terms.
| Action | What users should expect |
|---|---|
Edit Bot | Open the bot and continue working on its code or settings. |
Edit Section | Open one named section in a more focused editing view. |
Delete Bot | Remove the bot from the active workspace. This should be treated as a deliberate action, not a casual click. |
Open AI | Ask for help with code changes, debugging, or generating a first draft. |
Open Snippets | Insert reusable code patterns without rewriting common boilerplate by hand. |
Workflow tips
- Start in the full editor when learning a bot: It gives you the broadest view of the project.
- Switch to section editing for precision: It is better when you already know which part of the bot you want to change.
- Use snippets for repetitive patterns: This keeps routine handler code consistent.
- Keep docs and editor close together: The product is designed so users do not have to leave the app every time they forget a method or workflow.