Skip to content
StudioCMS Docs
Main Site

@studiocms/html

v0.1.0-beta.27 GitHub npm Changelog

Introduction

Section titled “Introduction”

This plugin enables HTML Support within StudioCMS.

Installation

Section titled “Installation”

  1. Install the package using the following command:

    Terminal window
    npm run studiocms add @studiocms/html

  2. Your StudioCMS config should now include @studiocms/html:

    studiocms.config.mjs
    import { 
    function defineStudioCMSConfig(config: StudioCMSOptions): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | {
                host?: string | boolean | undefined;
                sitemap?: string | boolean | string[] | undefined;
                policy?: {
                    userAgent?: "360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" | "Yandex" | "YandexMobileBot" | "Algolia Crawler" | "BublupBot" | "CCBot" | "Cliqzbot" | "Daumoa" | "DeuSu" | "EuripBot" | "Exploratodo" | "Feedly" | "Findxbot" | "istellabot" | "JikeSpider" | "Lycos" | "Mail.Ru" | "MojeekBot" | "OrangeBot" | "Pinterest" | "Plukkie" | "Qwantify" | "Rambler" | "SemanticScholarBot" | "SeznamBot" | "Sosospider" | "Slurp" | "Twitterbot" | "WhatsApp" | "yacybot" | "YepBot" | "Yeti" | "YioopBot" | "yoozBot" | "YoudaoBot" | "*" | ("360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" | "Yandex" | "YandexMobileBot" | "Algolia Crawler" | "BublupBot" | "CCBot" | "Cliqzbot" | "Daumoa" | "DeuSu" | "EuripBot" | "Exploratodo" | "Feedly" | "Findxbot" | "istellabot" | "JikeSpider" | "Lycos" | "Mail.Ru" | "MojeekBot" | "OrangeBot" | "Pinterest" | "Plukkie" | "Qwantify" | "Rambler" | "SemanticScholarBot" | "SeznamBot" | "Sosospider" | "Slurp" | "Twitterbot" | "WhatsApp" | "yacybot" | "YepBot" | "Yeti" | "YioopBot" | "yoozBot" | "YoudaoBot" | "*")[] | undefined;
                    allow?: string | string[] | undefined;
                    disallow?: string | string[] | undefined;
                    crawlDelay?: number | undefined;
                    cleanParam?: string | string[] | undefined;
                }[] | undefined;
            } | undefined;
            injectQuickActionsMenu?: boolean | undefined;
            dashboardConfig?: {
                dashboardEnabled?: boolean | undefined;
                inject404Route?: boolean | undefined;
                faviconURL?: string | undefined;
                dashboardRouteOverride?: string | undefined;
                versionCheck?: boolean | undefined;
            } | undefined;
            authConfig?: {
                providers?: {
                    usernameAndPassword?: boolean | undefined;
                    usernameAndPasswordConfig?: {
                        allowUserRegistration?: boolean | undefined;
                    } | undefined;
                } | undefined;
                enabled?: boolean | undefined;
            } | undefined;
            developerConfig?: {
                demoMode?: false | {
                    password: string;
                    username: string;
                } | undefined;
            } | undefined;
            preferredImageService?: string | undefined;
        } | undefined;
    } | undefined
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms/config';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     // ...Other Options
    })
    defineStudioCMSConfig     } from 'studiocms/config';
    import 
    function html(options?: HTMLSchemaOptions): StudioCMSPlugin
    Creates the StudioCMS HTML plugin.
    

    This plugin integrates HTML page type support into StudioCMS, providing editor and renderer components.
It resolves configuration options, sets up Astro integrations, and registers the HTML page type for rendering.
    @param ― options - Optional configuration for the HTML schema.
    @returns ― The StudioCMS plugin configuration object.
    html     from '@studiocms/html';
    

     export default 
    function defineStudioCMSConfig(config: StudioCMSOptions): {
        plugins?: StudioCMSPlugin[] | undefined;
        logLevel?: "All" | "Fatal" | "Error" | "Warning" | "Info" | "Debug" | "Trace" | "None" | undefined;
        dbStartPage?: boolean | undefined;
        verbose?: boolean | undefined;
        componentRegistry?: Record<string, string> | undefined;
        locale?: {
            dateLocale?: string | undefined;
            dateTimeFormat?: Intl.DateTimeFormatOptions | undefined;
        } | undefined;
        features?: {
            sdk?: boolean | {
                cacheConfig?: boolean | {
                    lifetime?: string | undefined;
                } | undefined;
            } | undefined;
            robotsTXT?: boolean | {
                host?: string | boolean | undefined;
                sitemap?: string | boolean | string[] | undefined;
                policy?: {
                    userAgent?: "360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" | "Yandex" | "YandexMobileBot" | "Algolia Crawler" | "BublupBot" | "CCBot" | "Cliqzbot" | "Daumoa" | "DeuSu" | "EuripBot" | "Exploratodo" | "Feedly" | "Findxbot" | "istellabot" | "JikeSpider" | "Lycos" | "Mail.Ru" | "MojeekBot" | "OrangeBot" | "Pinterest" | "Plukkie" | "Qwantify" | "Rambler" | "SemanticScholarBot" | "SeznamBot" | "Sosospider" | "Slurp" | "Twitterbot" | "WhatsApp" | "yacybot" | "YepBot" | "Yeti" | "YioopBot" | "yoozBot" | "YoudaoBot" | "*" | ("360Spider" | "360Spider-Image" | "360Spider-Video" | "HaoSouSpider" | "AdsBot-Google" | "AdsBot-Google-Mobile" | "AdsBot-Google-Mobile-Apps" | "Googlebot" | "Googlebot-Image" | "Googlebot-Mobile" | "Googlebot-News" | "Googlebot-Video" | "Mediapartners-Google" | "adidxbot" | "bingbot" | "BingPreview" | "MicrosoftPreview" | "msnbot" | "msnbot-media" | "Applebot" | "AppleNewsBot" | "Baiduspider" | "Baiduspider-image" | "Baiduspider-mobile" | "Baiduspider-news" | "Baiduspider-video" | "coccoc" | "coccocbot-image" | "coccocbot-web" | "DuckDuckBot" | "DuckDuckGo-Favicons-Bot" | "facebookcatalog" | "facebookexternalhit" | "Facebot" | "gooblog" | "ichiro" | "Sogou blog" | "Sogou inst spider" | "Sogou News Spider" | "Sogou Orion spider" | "Sogou spider2" | "Sogou web spider" | "Yandex" | "YandexMobileBot" | "Algolia Crawler" | "BublupBot" | "CCBot" | "Cliqzbot" | "Daumoa" | "DeuSu" | "EuripBot" | "Exploratodo" | "Feedly" | "Findxbot" | "istellabot" | "JikeSpider" | "Lycos" | "Mail.Ru" | "MojeekBot" | "OrangeBot" | "Pinterest" | "Plukkie" | "Qwantify" | "Rambler" | "SemanticScholarBot" | "SeznamBot" | "Sosospider" | "Slurp" | "Twitterbot" | "WhatsApp" | "yacybot" | "YepBot" | "Yeti" | "YioopBot" | "yoozBot" | "YoudaoBot" | "*")[] | undefined;
                    allow?: string | string[] | undefined;
                    disallow?: string | string[] | undefined;
                    crawlDelay?: number | undefined;
                    cleanParam?: string | string[] | undefined;
                }[] | undefined;
            } | undefined;
            injectQuickActionsMenu?: boolean | undefined;
            dashboardConfig?: {
                dashboardEnabled?: boolean | undefined;
                inject404Route?: boolean | undefined;
                faviconURL?: string | undefined;
                dashboardRouteOverride?: string | undefined;
                versionCheck?: boolean | undefined;
            } | undefined;
            authConfig?: {
                providers?: {
                    usernameAndPassword?: boolean | undefined;
                    usernameAndPasswordConfig?: {
                        allowUserRegistration?: boolean | undefined;
                    } | undefined;
                } | undefined;
                enabled?: boolean | undefined;
            } | undefined;
            developerConfig?: {
                demoMode?: false | {
                    password: string;
                    username: string;
                } | undefined;
            } | undefined;
            preferredImageService?: string | undefined;
        } | undefined;
    } | undefined
    A utility function to define the StudioCMS config object.
This function is used to define the optional StudioCMS
config object in the Astro project root. The expected file
name is studiocms.config.mjs. And it should be adjacent
to the Astro project's astro.config.mjs file.
    

    StudioCMS will attempt to import this file and use the default
export as the StudioCMS config object automatically if it exists.
    

    Using this function is optional, but it can be useful for IDEs
to provide better intellisense and type checking.
    @example 
    // studiocms.config.mjs
    import { defineStudioCMSConfig } from 'studiocms/config';
    

    export default defineStudioCMSConfig({
     dbStartPage: true,
     // ...Other Options
    })
    defineStudioCMSConfig    ({
       
    plugins?: StudioCMSPlugin[] | undefined
    plugins    : [
         
    function html(options?: HTMLSchemaOptions): StudioCMSPlugin
    Creates the StudioCMS HTML plugin.
    

    This plugin integrates HTML page type support into StudioCMS, providing editor and renderer components.
It resolves configuration options, sets up Astro integrations, and registers the HTML page type for rendering.
    @param ― options - Optional configuration for the HTML schema.
    @returns ― The StudioCMS plugin configuration object.
    html    (),
       ],
     });

Options

Section titled “Options”
type 
type htmlOptions = {
    sanitize: {
        allowAttributes: Record<string, string[]>;
        allowComments: boolean;
        allowComponents: boolean;
        allowCustomElements: boolean;
        allowElements: string[];
        blockElements: string[];
        dropAttributes: Record<string, string[]>;
        dropElements: string[];
    };
}
htmlOptions = {
  
sanitize: {
    allowAttributes: Record<string, string[]>;
    allowComments: boolean;
    allowComponents: boolean;
    allowCustomElements: boolean;
    allowElements: string[];
    blockElements: string[];
    dropAttributes: Record<string, string[]>;
    dropElements: string[];
}
sanitize: {
    
allowAttributes: Record<string, string[]>
allowAttributes: 
type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type T
Record<string, string[]>;
    
allowComments: boolean
allowComments: boolean;
    
allowComponents: boolean
allowComponents: boolean;
    
allowCustomElements: boolean
allowCustomElements: boolean;
    
allowElements: string[]
allowElements: string[];
    
blockElements: string[]
blockElements: string[];
    
dropAttributes: Record<string, string[]>
dropAttributes: 
type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type T
Record<string, string[]>;
    
dropElements: string[]
dropElements: string[];
  };
};