Phases.Umbraco.EmojiPicker 1.0.0

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher. 
dotnet add package Phases.Umbraco.EmojiPicker --version 1.0.0
                    


                    

                
NuGet\Install-Package Phases.Umbraco.EmojiPicker -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Phases.Umbraco.EmojiPicker" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Phases.Umbraco.EmojiPicker" Version="1.0.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Phases.Umbraco.EmojiPicker" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Phases.Umbraco.EmojiPicker --version 1.0.0
                    


                    

                
#r "nuget: Phases.Umbraco.EmojiPicker, 1.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Phases.Umbraco.EmojiPicker@1.0.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Phases.Umbraco.EmojiPicker&version=1.0.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Phases.Umbraco.EmojiPicker&version=1.0.0
                    


                            Install as a Cake Tool

Phases.Umbraco.EmojiPicker

A custom Umbraco package by Anju with:

  1. Emoji Picker property editor — textbox/textarea with an emoji insert button
  2. Rich Text Editor (TipTap) toolbar button — same emoji grid, inserts at the RTE caret

The property-editor stored value is always a plain string (text with emoji characters inline). No custom JSON format.

Compatible with Umbraco 17 and Umbraco 18.

Install

dotnet add package Phases.Umbraco.EmojiPicker

Or in your .csproj:

<PackageReference Include="Phases.Umbraco.EmojiPicker" Version="1.0.0" />

Restart the site after install, then hard-refresh the backoffice (Ctrl+F5).

Requirements
Umbraco >= 17.0.0 and < 19.0.0
.NET net10.0 (same as Umbraco 17/18)

How to use — property editor

  1. In the backoffice go to Settings → Data Types → Create.
  2. Select the property editor Emoji Picker (group: common, icon: smiley).
  3. Configure the Data Type (see below), then save.
  4. Add that Data Type to a Document Type property.

Stored value type: plain string (Umbraco.Plain.String).

How to use — Rich Text Editor toolbar

  1. Go to Settings → Data Types and open (or create) a Rich Text Editor data type.
  2. Open the Toolbar configuration.
  3. Find Emoji (smiley icon) and drag it onto a toolbar row.
  4. Save the Data Type.
  5. Edit content that uses that RTE — click the emoji toolbar button to insert at the caret.

Configuration

Setting Description Default
Multi-line Use a textarea instead of a single-line input. false
Placeholder text Optional placeholder when the field is empty. (none)

Features (v1)

  • Single-line (uui-input) or multi-line (uui-textarea) via Data Type toggle
  • Emoji button at the end of the field opens a popover panel
  • Same emoji grid available as a TipTap RTE toolbar button
  • Fixed categories: Smileys, Gestures, Objects, Symbols (~200 curated emoji)
  • Inserts at the current cursor position (not only append)
  • Panel closes on emoji pick, outside click, or Escape
  • Read-only support in the backoffice

Not in v1: search, skin-tone variants, recently used tracking, flags.

Compatibility notes (17 + 18)

  • Extension registration uses modern umbraco-package.json + Lit/propertyEditorUi (not AngularJS / legacy package.manifest).
  • The panel uses uui-popover-container with the native Popover API (popovertarget). Do not use the deprecated uui-popover component — it was removed in UUI 2 / Umbraco 18.
  • NuGet dependency range: [17.0.0,19.0.0).

For contributors (source repo)

This repository contains:

Project Role
Umbraco.EmojiPicker.Package NuGet / RCL package (Phases.Umbraco.EmojiPicker)
Umbraco.EmojiPicker Sample Umbraco site for local testing 
# Build the Lit UI
cd Umbraco.EmojiPicker.Package/client
npm install --legacy-peer-deps
npm run build

# Pack
dotnet pack Umbraco.EmojiPicker.Package/Umbraco.EmojiPicker.Package.csproj -c Release -o artifacts
Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.0 134 8/13/2026