1.0.0 • Public • Published

    npm version min+gzip


    a small web component that uses a internal mini-modal to allow setting of a target Mastodon instance from the user to allow sharing.


    1. Allows user to define their instance or select from a datalist that is present or custom set (the power of input type=url list and datalist! yeah web platform)
    2. Will remember that for the domain
    3. Does zero tracking of anything
    4. Lots of custom css props, every string can be overridden


    This web component is built with ES modules in mind and is available on NPM:

    Install code-block:

    npm i @justinribeiro/share-to-mastodon
    # or
    yarn add @justinribeiro/share-to-mastodon

    After install, import into your project:

    import '@justinribeiro/share-to-mastodon';

    Install with CDN

    If you want the paste-and-go version, you can simply load it via CDN:

    <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon@0.2.0/dist/share-to-mastodon.js">

    A Basic Example

    By default, the component renders whatever you feed the <slot>, wrapped internally as a <a>:


    <share-to-mastodon message="My website is amazing, come check it out!" url="https://justinribeiro.com">
      Share to Mastodon

    A More Advanced Style Example

    If you're looking for something more button-like, congrats, the slot let's you make the magic happen:


      .myMagicalCss > div {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem;
        background: lightblue;
        border-radius: 5px;
        border: 1px solid #ccc;
      .myMagicalCss > div:hover {
        background: #eee;
      .myMagicalCss svg {
        width: 24px;
        margin-right: 0.5rem;
    <share-to-mastodon class="myMagicalCss">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4 232">
            d="M212 139c-3 16-29 34-58 38-15 2-30 3-46 3-26-2-46-7-46-7v8c4 25 26 27 47 28 21 0 39-6 39-6l1 19s-14 8-41 10c-14 1-32-1-53-6C9 214 1 165 0 116V76c0-50 33-65 33-65C50 3 78 0 108 0h1c29 0 58 3 74 11 0 0 33 15 33 65 0 0 1 37-4 63"
            d="M178 80v61h-25V82c0-13-5-19-15-19-12 0-18 8-18 22v33H96V85c0-14-6-22-17-22s-16 6-16 19v59H39V80c0-12 3-22 9-30 7-7 16-11 26-11 13 0 22 5 28 15l6 10 6-10c6-10 16-15 28-15 11 0 19 4 26 11 6 8 10 18 10 30"
        <div>Share This Site</div>


    Property Attribute Type Default Description
    customInstanceList customInstanceList array [{"label":"Mastodon.Social","link":"https://mastodon.social/"},{"label":"Mastodon.Online","link":"https://mastodon.online/"},{"label":"fosstodon.org","link":"https://fosstodon.org/"},{"label":"photog.social","link":"https://photog.social/"}] An array of Mastodon instances you would like auto-populated within the
    url datalist
    message message string "Check out the amazing content I just discovered!" The message you'd like to share within the target Mastodon input that
    opens on the share page.
    modalMessage modalMessage string "Select or set which instance you'd like to share to." The string that is displayed above the input field on the mini-modal
    modalSaveAsDefault modalSaveAsDefault string "Remember My Instance (locally only)" The string that is used as the label for the checkbox default save
    modalShareButton modalShareButton string "Share" The string that is display on as the action button to share on the
    targetInstance targetInstance string "" The target Mastodon instance, usually set by the user within the
    mini-modal that display on first share
    url url string "href" The url of the thing you are sharing within the target Mastodon input that
    opens on the share page.


    Method Type Description
    cancel (): void Close the modal share helper


    Name Description
    default The text or what ever you want the link to be

    CSS Custom Properties

    Property Default Description
    --wc-stm-color "black" the host text color, default #000
    --wc-stm-dialog-background-color "white" the mini-dialogs background color
    --wc-stm-dialog-border-radius "0.5rem" this mini-dialogs border radius
    --wc-stm-dialog-padding "1rem" the mini-dialogs inner padding
    --wc-stm-font-family "sans-serif" the host font family, default sans-serif
    --wc-stm-form-button-background-color "#eee"
    --wc-stm-form-button-background-color-hover "#ccc"
    --wc-stm-form-button-border-radius "0.25rem"
    --wc-stm-form-button-color "inherit"
    --wc-stm-form-button-color-hover "inherit"
    --wc-stm-form-button-font-size "1em"
    --wc-stm-form-button-padding "0.5rem 0"
    --wc-stm-form-input-border "1px solid #ccc"
    --wc-stm-form-input-border-radius "0.25rem"
    --wc-stm-form-input-font-size "1em"
    --wc-stm-form-input-padding "0.5rem"
    --wc-stm-link-color-active "red" the link text color active
    --wc-stm-link-color-initial "blue" the link text color if no slot structures overwrite
    --wc-stm-link-color-visited "purple" the link text color visited
    --wc-stm-link-text-decoration "underline" the link text decoration if no slot structures overwrite




    npm i @justinribeiro/share-to-mastodon

    DownloadsWeekly Downloads






    Unpacked Size

    56.3 kB

    Total Files


    Last publish


    • justinribeiro