You can use TK Live View in MDriven Designer to fine-tune a running Turnkey web user interface, test layout changes with real data, synchronize UI assets, and inspect the runtime model.

Open TK Live View with the Turnkey Live View Editor button. It contains an embedded browser and editor tools for the ViewModel that produces the current Turnkey UI.

Requirement: A Turnkey application must be running before you can use Live Edit. Start it from Server Setup before opening a running view.

Choose an editing mode

TK Live View provides two ways to work with a ViewModel.

Mode	Use it when	What you see
View Edit	You want to design one view without depending on runtime data.	The rendered HTML for the selected view, without data. This avoids many reloads while you make structural changes.
Live Edit	You need to see real data while you adjust the UI or verify a behavior in the running application.	The running Turnkey UI and its data. Changes can cause the view to reload, so you may need to search for data again.

For example, use View Edit to add and arrange fields in an edit form. Switch to Live Edit when you need to confirm that a nesting shows the expected records for a real root object.

Start the application

Server Setup

Use Server Setup to start the Turnkey application that TK Live View will edit and debug.

1. Open Turnkey Live View Editor.
2. Select Server Setup.
3. Choose the local Turnkey prototyper for the default local workflow, or select the MDriven Server setting when you want to run against an MDrivenServer.
4. Start the application.
5. Open View Edit or Live Edit.

Keep the server setting in mind when you move to debugging: Debug Information uses the same server setup, so you inspect the same model and data that the running UI uses.

Fine-tune a ViewModel

Work from the ViewModel tree

The ViewModel tree gives you the ViewModel Editor controls for the active ViewModel. Use it to change the structure that generates the web UI.

Typical tasks include:

• Add a ViewModel column.
• Rearrange columns and widgets.
• Add a nesting.
• Add or move a placing container.
• Change the layout of a placing container.

To add several items from the model, use Add column and then Pick from model. Select the attributes or associations you need and use Add selected as ViewModel columns. The selection can include associations, which adds the corresponding nesting.

For example, in an order edit view, select the order's status and order date, then select the association to order lines. Add the selected items to create the two fields and an order-lines nesting in the current context.

When you add items while a placing container is selected, the new columns are placed in that container. This context-sensitive behavior helps you avoid adding a field to the wrong part of the view.

Relate the tree to the rendered UI

TK Live View marks the relationship between the ViewModel tree and the generated widgets.

• Select a column or placing container in the tree to identify its target in the rendered UI.
• Select an orange marker in the rendered UI to locate the corresponding item in the tree.
• Use the menu available from an orange marker to perform actions such as adding a column at that location.

Use these markers before moving a widget. For example, if two similar labels appear in a form, select the marker beside the label you want to change to verify which ViewModel column produces it.

Arrange the generated UI

In Live Edit, the web UI shows the view as users see it. Turn on Edit to drag and reposition widgets in the rendered UI.

You can move widgets and placing containers directly. Dropping a placing container on another container at the same level swaps their positions. Hold Ctrl while dropping on a container to move it into that container instead.

Use this for focused layout adjustments. For example, drag a status field above a comments field, then enable Live Update to see the generated UI refresh with the ViewModel change.

Live Update displays ViewModel changes in real time. Because Live Edit works against a running application and data, a change can reload the view. Use View Edit for larger structural changes when you do not need runtime data.

Use Advanced Edit for detailed settings

Expand Advanced Edit when you need ViewModel, ViewModel column, or constraint settings that are not shown in the compact editing controls. This area exposes the detailed settings from the ViewModel Editor while keeping them out of the way during routine layout work.

For example, use the compact tree controls to place a column, then open Advanced Edit when you need to inspect or change that column's detailed properties.

Synchronize Turnkey assets

What AssetsTK Sync does

AssetsTK Sync manages the assets for the current running model. Expanding this section creates the AssetsTK folder when it does not already exist. The folder is named for the model with an _AssetsTK suffix so Turnkey can discover it when the model is uploaded.

Use the file tree to create and work with CSS, JavaScript, page overrides, and components. Select synchronization for an asset when you want saved local changes uploaded to the running server and made active there.

For example, enable synchronization for Content/tkuserCss.css, save a CSS change, and refresh the running UI to verify the result. You can edit the file with its associated editor, such as a code editor, rather than the default editor.

Important: Synchronized assets affect the server. If you later run a different model against the same server, previously uploaded assets can still affect that model. Delete an asset when you no longer want it applied; deletion removes it locally and from the server after confirmation.

Create common asset files

Use the buttons in AssetsTK Sync to create the standard file or folder structure.

Command	Creates	Use it for
Refresh file tree	A refreshed AssetsTK file listing.	Showing files that were added or changed outside MDriven Designer.
Ensure Content/tkuserCss.css	Content/tkuserCss.css.	CSS that applies across the application.
Ensure Content/theme-user.css	Content/theme-user.css.	Changes to default Turnkey theme properties and variables.
Ensure EXTScripts/appwideangularscriptincludes.html	EXTScripts/appwideangularscriptincludes.html.	Loading scripts during page rendering.
Ensure ViewAssets/<NameOfViewModel> (css,js)	Per-ViewModel CSS and JavaScript files.	Customizing one ViewModel without applying the change to every view.
Ensure Views/EXTOverridePages/<NameOfViewModel>.tagexpander.cshtml	A tagexpander override file for the current ViewModel.	Overriding the default Turnkey UI implementation for that ViewModel.
Ensure EXTComponents/TemplateComponent (css,html,js)	The folder and CSS, HTML, and JavaScript files for a template component.	Creating an Angular component for use in the Turnkey application.

Choose the narrowest scope that meets the requirement:

• Use tkuserCss.css for a rule that should apply to all views.
• Use theme-user.css when the change belongs to theme variables and standard colors.
• Use ViewAssets when a CSS or JavaScript rule must affect one ViewModel only.

For example, a global tkuserCss.css rule can change the application background in every screen. If only the OrderEdit ViewModel needs a special label style, create that ViewModel's ViewAssets files instead. This avoids unintentionally changing other views.

Inspect and test CSS and JavaScript

The embedded browser supports browser developer tools. Use inspection to identify the HTML element or CSS class that you need to target, and use the browser debugger to investigate JavaScript behavior.

A practical workflow is:

1. Open the target view in Live Edit.
2. Create the global or per-view asset file.
3. Enable synchronization for the file.
4. Inspect the rendered widget to identify an appropriate selector.
5. Save the CSS or JavaScript file.
6. Refresh the view and verify the change.

For runtime definitions, generated Angular widgets, and page data, use Documentation:Development info in runtime.

Download and merge components

Select (Re)Download Components from GitHub to download the available mergeable models to your local machine. Then use Components to choose from to select a model and merge it into the current model.

These components provide examples and patterns for adding MDriven functionality. Download the components before attempting to select one for merging.

Debug the running application

Debug Information

Debug Information opens the debugger for the model started by the current Server Setup configuration. Use it to inspect model data, create, read, and update data, test ViewModels, and investigate errors.

For example, if a Live Edit view does not show the expected records, open Debug Information with the same MDrivenServer setting and test the ViewModel against the same data source.

Use Documentation:Development info in runtime when you need runtime metadata or browser-facing development information. Use Documentation:SysTurnkeyTraceLog Pattern when you need to add structured tracking of user navigation and actions to a Turnkey application.

Recommended workflow

1. Start Turnkey in Server Setup.
2. Use View Edit to make structural changes without runtime-data reloads.
3. Use the ViewModel tree and Pick from model to add columns and nestings in the intended container.
4. Use the rendered UI markers and Edit mode to make focused layout adjustments.
5. Switch to Live Edit to verify the result with real data.
6. Create and synchronize an AssetsTK file for CSS or JavaScript changes that cannot be expressed in the ViewModel.
7. Use Debug Information when the issue involves data, ViewModel execution, or server behavior.
8. Remove synchronized test assets when they are no longer needed, especially before using the server with another model.

See also

• Documentation:Development info in runtime
• Documentation:SysTurnkeyTraceLog Pattern