DOCSEARCHbyAlgolia
Submit Docs

Devisto Documentation

website·Indexed 31 days ago

https://www.devisto.com/docs

Developer documentation for Devisto, covering core features including Tables, Fields, Pages, and Resources. Includes guides on integrating Livewire, Blade, JavaScript, and CSS, as well as API authentication, translatable data, and specialized components like Blade Mail and Markdown Mail.

Tokens
20.7K
Snippets
104
Records
171
Agent score
61%

What's inside Devisto

  1. Overview of Devisto VS Code Extension

    The Devisto VS Code Extension allows developers to open Devisto projects directly in VS Code. All project resources—including views, Livewire components, CSS, and JS—are available in the editor. Changes made to files in VS Code are instantly synced to Devisto, and the Devisto preview panel refreshes automatically upon changes.

  2. Understand Devisto staging and production environments

    Devisto uses two environments for website publication: staging and production. All new projects start in staging. Once a project is published to production, a duplicate is created, and both versions exist simultaneously.

    Key differences include:

    • Domain: Staging uses a slug-of-your-project.devisto.com subdomain; Production uses custom domains.
    • Indexing: Search engine indexing is disabled in staging and enabled in production.
    • Debugging: PHP debugging and Alpine/Livewire Devtools are enabled in staging but disabled in production.
    • Optimization: CSS/JS minification and purging are only applied to the production environment.
    • Cost: Staging is free; Production costs €0.50 per day.

  3. Understand Devisto Page Tree and URL Structure

    Pages in Devisto are organized in a tree structure with parents and children. This hierarchy directly impacts URLs: a page's URL is composed of its parent's URL followed by its own segment. Changing a parent page's URL automatically updates the URLs of all its children and grandchildren.

    URL segments are determined by:

    1. The page slug (default).
    2. A specific URL override defined in the page's URL tab.
    3. A URL Field from a linked table (for dynamic pages).

    The Root page defines the starting point for all URLs in a specific language (e.g., / or /fr).

  4. Understand how translatable fields work in Devisto

    Most field types in Devisto can be marked as translatable. A translatable field stores a unique value for every language defined in the project. When accessing these fields in code, Devisto automatically returns the value corresponding to the currently active language. In the data table and entry editing dialogs, translatable fields appear as separate columns or inputs for each visible language, which can be managed via a dropdown in the upper right corner.

  5. Monitor mail delivery via the Mail Log

    The Log tab provides an overview of all mail submissions and their current status. If a delivery fails, clicking the status badge reveals the specific error details. The log includes a filter in the upper right corner to isolate entries for a specific mail.

  6. Use the Devisto Preview panel

    The Preview panel acts as a mini-browser within the Devisto admin panel, allowing you to view your website side-by-side with your configuration. It supports standard browser navigation (back, forward, refresh, homepage, and manual URL entry). The preview automatically refreshes whenever you save a page, entry, or resource, including saves made via the Devisto VS Code Extension. For users with multiple monitors, the preview can be popped out into its own separate window.

  7. Export entries to CSV from the entry overview

    To export entries, click the Export button in the upper right corner of the entry overview. The export form inherits your current view settings, including search queries, scopes, parameters, visible fields, and sorting. You can modify these settings in the dialog to refine the dataset; a live count of entries to be exported is displayed in the lower right corner.

  8. Understand and use Globals for site-wide values

    Globals are single-value data entries used for information that appears across a site, such as website titles, company addresses, social media links, or form labels (e.g., 'Submit'). Unlike tables, which contain multiple rows and columns, a global represents a single value. They are particularly useful for making hardcoded settings modifiable by clients or managing labels in multilingual websites.

  9. Schedule automatic imports

    Imports using online sources (URL or Twitter) can be scheduled. Click Add Schedule and choose a frequency.

    • Scheduled imports are listed in a separate section at the top of the imports overview.
    • You can modify or manually trigger a scheduled import from this section.
    • Every execution is logged in the imports overview table; logs for scheduled imports are deleted after 30 days.

  10. Manage entry ordering with Order fields

    Order fields store an auto-incremented number. Changing the number of one entry automatically renumbers others. This allows for multiple independent ordering systems (e.g., one for a general overview and one for a homepage).
    table('team-members')->orderBy('order')->get();

  11. Perform automatic translations in Devisto

    Devisto allows you to translate data at various levels by right-clicking the target and selecting 'Translate'. Available targets include:

    • Globally: Via the language overview (Translate button in the upper right).
    • Page: Right-click a page or select multiple pages in the action popup.
    • Entry: Right-click an entry in a table or select multiple entries in the action popup.
    • Field: Right-click a specific field.
    • Mail: Right-click a mail entity.

    When translating, you specify the source and destination languages. Note that destination values are overwritten. To use Google Translate for text fields instead of just copying values, enable the Translate Text Fields option.

  12. Use the integrated Tinker tool in Devisto

    Tinker is an integrated tool in Devisto that allows you to execute PHP code on the fly for the current project. It is primarily used for rapid testing and debugging of code. To activate it, click Tinker in the left-hand side navigation menu.