In order to use this feature, you must be an Editor, Admin or Account Owner in Walnut.
Learn more about each role.
Editing the source code of a screen allows for unique customizations to be added, which may not have been present during capturing. Similar to inspecting a page in Chrome and viewing DevTools, editing the source code of a screen will showcase the hierarchy of the page broken down by each element. When making edits, it is important to note that each change applied will result in that element being locked for any further changes.
Disclaimer: It is recommended that users who edit the source code have a basic understanding or beginner level coding skills.
Editing Template Source
Select the element within your template screen that you'd like to edit. Then select the three dots within the editor's menu.
From there, select edit source.
The code for the selected element ill appear at the bottom of your template screen. In some cases, you may need to use the arrow at the top left corner of the code to select the parent element.
If you wish to find and/or find and replace a specific element, simply click anywhere within the code, and use the following keyboard shortcuts:
|Command + F
|Control + F
|Find & Replace
|Command + Option + F
|Control + Alt + F
Note: In some cases, if you are attempting to make edits to a large code snippet, potential destruction to the screen may occur. In those cases, Walnut will display a warning message. Please use your discretion before continuing.
Important to Note 📝
- If you made a change to the code, and clicked 'Apply' but weren't getting the results you were expecting; you can undo your edit quickly by hitting command + Z (Mac) or control + Z (PC) to revert your changes. This will only work on the last change made, and if the template did not save. For reverting saved changes, either click "Reset Changes" on the element, or "Reset all Changes" on the template screen.