Fancy M.B

Posted by @jeffmueller, Last update over 2 years ago - Unlisted

Take an HTML prompt, and either post or save the post. Cancel to delete it forever. Because sometimes you don’t want to send a post.

With apologies to Tim Nahumck, who wrote the original Fancy Tweet action. This is based very heavily on his work. Everyone thank Tim for being awesome.


  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
      <title>"Post Composer"</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
        @charset "utf-8";
        :root {
          --main-bg-color: white;
          --main-color: black;
          --alternate-bg-color: #efefef;
          --alternate-color: #222222;
          --main-border-color: #BBBBBB;
          --link-color: #48BB78;
        @media (prefers-color-scheme: dark) {
          :root {
            --main-bg-color: #222222;
            --main-color: #eeeeee;
            --alternate-bg-color: #444444;
            --alternate-color: #cccccc;
            --main-border-color: #AAAAAA;
              --link-color: #48BB78;
        html {
          font-size: 100%;
          font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
          line-height: 1em;
          height: 100%;
        body {
          margin: 0;
          padding: 1em;
          background-color: var(--main-bg-color);
          color: var(--main-color);
          height: 100%;
        @media (max-device-width: 480px) {}
        @media (min-device-width: 481px) {
          body {
            margin: auto;
            max-width: 600px;
        blockquote {
          font-style: italic;
          margin: 1.5em 2em;
          padding: 1em;
          background-color: var(--alternate-bg-color);
          color: var(--alternate-color);
        a {
          color: var(--link-color);
        h4 {
        	margin: .25em 0;
        	padding: 0;
        img {
          max-width: 90%;
    	button {
    		color: #fff !important;
    		text-transform: uppercase;
    		text-decoration: none;
    		background: var(--link-color);
    		font-size: .9em;
    		padding: .5em 1em;
    		border-radius: 8px;
    		display: inline-block;
    		border: none;
    		transition: all 0.4s ease 0s;
    	button:hover {
    		letter-spacing: 1px;
    		-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    		-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
    		box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
    		transition: all 0.4s ease 0s;
            button.cancel {
           form {
    		background-color: var(--main-bg-color);
    		color: var(--main-color);
    	textarea {
    		padding: 1em;
    	@media (prefers-color-scheme: dark) {
    		textarea {
    			border-color: #fff;
    // scripting taken from
    function countChars(obj){
        var maxLength = 256;
        var strLength = obj.value.length;
        var charRemain = (maxLength - strLength);    
        if(charRemain < 0){
            document.getElementById("charNum").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
            document.getElementById("charNum").innerHTML = charRemain+' characters remaining';
    <div id="prompt" style="margin: auto; width: 80%; height: 40%;">
    <h2 style="text-align: center;text-decoration: underline;">Post Composer</h2>
    <h5 style="text-align: center;">Post are limited to 256 chars, max.</h5>
    <form style="text-align:center"> <textarea id="postText" style="margin:auto;width:90%;height:120px;font-size:100%;background-color: var(--main-bg-color);color: var(--main-color);font-family: -apple-system, sans-serif;maxlength="512";autofocus; onkeyup="countChars(this)"></textarea></form>
    <p id="charNum" style="text-align:center;">256 characters remaining</p>
    <p style="text-align: center;">
    <button onclick="doCommand('postIt'); return false;">Post</button>
    <button onclick="doCommand('save'); return false;">Save</button>
    <button class="cancel" onclick="Drafts.cancel(); return false;"">Cancel</button>
    const text = document.getElementById('postText');
    function doCommand(cmd) {
    	Drafts.send("command", cmd);
    	Drafts.send("postText", text.value);
  • script (iOS only)

    let f = () => {
    	let cmd = context.previewValues["command"];
    	let text = context.previewValues["postText"];
    	if (!cmd) { return; }	
    	if (cmd == "postIt") {
    		var credential = Credential.create("", "Insert app token generated on account page.");
    		credential.addTextField("apptoken", "App Token");
    		var appToken = credential.getValue("apptoken");
    		var endpoint = ""
    		let d = new Draft();
    		d.content = text;
    		// create and post HTTP request
    		var http = HTTP.create();
    		var response = http.request({
    		  "url": endpoint,
    		  "method": "POST",
    		  "encoding": "form",
    		  "data": {
    		    "h": "entry",
    		    "content": text
    		  "headers": {
    		    "Authorization": "Bearer " + appToken
    		console.log("Response: " + response.statusCode);
    		if (response.statusCode != 200 && response.statusCode != 202) {;


  • After Success Default
    Notification Info
    Log Level Info
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.